Question

大家好，我目前遇到了一个问题，但不知道出了什么问题。

        $.each(data.result, function(){
        $("tbody").append("<tr id='order_"+this['order_id']+"'><td>"+this['type']+"</td><td></td><td>"+this['description']+" </td><td>"+this['amount']+"</td><td>Edit | <a href='#' id='"+this['order_id']+"' title='Delete' class='delete'>X</a></td></tr>");

此代码附加到页面，我试图通过解析order_id来实现删除功能。但是，我无法选择此方法中附加的“删除”类。

我已经尝试将删除按钮与删除类一起使用..但是当它们由getJSON动态创建时，它只是不起作用而且我不知道为什么。

任何建议都将不胜感激，谢谢！

        <script>
        $(function() {
        $(".delete").click(function(){
        alert('hey');
        var element = $(this);
        var del_id = element.attr("id");
        var info = 'id=' + del_id;
        if(confirm("Are you sure you want to delete this?"))
        {
         $.ajax({
           type: "POST",
           url: "delete.php",
           data: info,
           success: function(){
         }
        });
         }
        return false;
        });
        });
        </script>

这是页面的源代码 - my_script是保存更新函数以从数据库中获取数据的文件

<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/my_script.js"></script>


<script>
$(function() {
$(".delete").click(function(){
alert('hey');
var element = $(this);
var del_id = element.attr("id");
var info = 'id=' + del_id;
if(confirm("Are you sure you want to delete this?"))
{
 $.ajax({
   type: "POST",
   url: "delete.php",
   data: info,
   success: function(){
 }
});
 }
return false;
});
});
</script>






</head>

<body onload="updates();">
<table width="100%" id="sortme" border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; border: 1px solid #CCC ">
  <thead>
    <tr>
    <td width="100" bgcolor="#EFEFEF"><strong>Line Type</strong></td>
    <td width="50" bgcolor="#EFEFEF"><strong>S/N</strong></td>
    <td bgcolor="#EFEFEF"><strong>Description</strong></td>
    <td bgcolor="#EFEFEF"><strong>Amount</strong></td>
    <td bgcolor="#EFEFEF">&nbsp;</td>
    </tr>
    </thead>



<tbody>
</tbody>
</table>
</body>
</html>

Answer 1

问题是，当没有删除DOM元素时，您要为删除创建事件处理程序。您需要使用.on方法并使用引用目标的委托（类删除） -

$('body').on('click', '.delete', function(){ ::all of your delete code:: };

我不喜欢将它附加到身体上的想法，但它适用于这个例子。我尝试将此附加到可能的最低元素，该元素将成为动态内容的父级。

Answer 2

尝试将绑定更改为：因为您正在动态创建元素，所以实际上没有任何内容绑定到它们。这将绑定到现有元素和新元素。

$(document).on('click', '.delete', function(){

Answer 3

当你创建一个新的DOM元素时，你必须重新加载jquery函数才能使它工作，你可以做的是在函数中添加$(".delete").click，例如......

function reloadClick(){
  $(".delete").click(func...
  ...
  ...
}

然后，在完成循环$.each(data.result之后，执行函数reloadClick()

$.each(data.result, function(){
  ...
  ...
}
reloadClick();

getJSON - 无法使用Jquery定位按钮

3 个答案: