我正在尝试创建一个由ajax查询填充的表,其中每行旁边都有一个删除按钮,因此可以轻松将其删除。

但是,如果我尝试在ajax查询中构建按钮,则似乎无法正确发布。
为了确保它不是jQuery中的代码,请单击我创建的这个简单函数

$('.delbutt').on("click", function(event) {
    var confirm = window.alert("good button pressing skills!");
    return false;
});


ajax查询和div表填充是通过以下方式处理的:

(function ajaxMapCalls() {
    $.ajax({
        url: mapgrabber,
        dataType: 'json',
        success: function(data, textStatus, xhr) {
            $("#vcmaps").empty();
            var output1 = "<table><tr><th>Customer</th><th>vCenter</th><th>Cluster</th><th>vSwitch</th><th></th></tr>"

            $(data).each(function(i, el) {

                var output2 = "<tr><td>" + el.customer + "</td><td>" + el.vcenter + "</td><td>" + el.cluster + "</td><td>" + el.vswitch + "</td><td><button class='delbutt'>delete</button></td></tr>";

                output1 += output2;
            });
            $("#vcmaps").append(output1 + "</table>");
        }
    });
    setTimeout(ajaxMapCalls, 2000)
})();


表格按钮在那里一切都构建良好,但是按钮的行为不符合预期,没有简单的jquery弹出窗口,并且它似乎试图发布服务器端此时不应执行的操作。

因此,我尝试将buttin的副本放入html中。

以下相关部分的HTML

<form action="#" method="POST" id="custVCassign"><div id="vcMenu"
class="flip"><h3>Assignment</h3></div>
<div class="panel">
Customer: <select class="select" id="custbag"></select><br>
vCenter: <select class="select" id="vCenter"></select><br>
Cluster: <select class="select" id="vCluster"></select><br>
Distributed switch: <select class="select" id="vSwitch"></select><br>
<button id="custvcdel" class="button2">Delete Cluster and Switch</button>
<button id="custvc" class="button">Add Cluster and Switch</button><br>
<button class='delbutt'>delete</button></form>
<div id="vcmaps"></div>
</div></form>


html内的按钮绝对可以正常工作,可以发出警报,但是ajax生成的到div“ vcmaps”中的任何按钮均无法正常运行。

我想知道是否是因为它是一个进一步的div,并且它正在更改为传统的后期操作,所以我将div用另一种形式包装。

<form action="#" method="POST" id="custVCen"><div id="vcmaps"></div></form>


还是一样。

有什么想法吗?

最佳答案

您的“ click”事件处理程序将不会捕获由ajax调用动态创建的按钮。当事件处理程序被调用时,它们还不存在,因此它将忽略它们。而且由于您没有为动态按钮指定type="button"属性,因此它们默认为type="submit",如果该按钮位于表单内,则在单击时将使用完整的回发提交表单(并且没有点击处理程序可以覆盖它)。

使用委托事件处理可以解决此问题。您将事件设置为在调用事件处理程序时肯定存在的元素上,然后告诉它将事件委托给事件触发时与次要选择器匹配的任何元素。我不知道哪个元素是您按钮中最低的共同祖先,因此我仅使用document作为示例:

$(document).on("click", '.delbutt', function(event) {


请参阅此处的“直接和委派事件”部分:http://api.jquery.com/on/有关更多详细信息。

其次,使用preventDefault()确保按钮不会触发二次回发。放:

event.preventDefault();


作为“点击”处理程序的第一行。有关更多信息,请参见https://api.jquery.com/event.preventdefault/。这比在函数的末尾添加return false;更为可靠,因为这意味着事件触发与防止默认值之间没有时间间隔。

10-05 20:42
查看更多