JS onClick在追加后不工作

Question

我有一些代码在AJAX请求成功时附加一个新的DIV。附加的div包含一个onclick的链接。但它不起作用。

代码附加链接：

<span class="boldheading_smaller" id="readreplytxt_'+ msgid +'" onclick="readoffer('+ msgid +')">Read More...</span>') 

这是用来做追加本身的代码 - 这它的onclick不新创建的div工作。我无法弄清楚为什么！

编辑：追加本身的结果是正确的，即onclick="readoffer('+ msgid +')"显示为onclick="readoffer(29)"

编辑：Enitre功能

function respondoffer(a, b, c) { 
    var msgid = a; 
    var usrid = b; 
    var resp = c; 
    $.ajax({ 
     type: 'POST', 
     url: '_process/offerrespond.php', 
     dataType: 'json', 
     data: { 
      msgid: msgid, 
      usrid: usrid, 
      resp: resp 
     }, 
     success: function (data) { 
      $("#" + msgid).slideUp(); 
      $('<div class="offer_box" id="' + msgid + '">') 
       .prepend('<img src="_img/user_images/' + usrid + '.jpg" alt="' + data.pro_name + '" class="offerimg"/>', 
       '<span class="regulartext">Offer Recivied On: ' + data.date_sent + '</span><span class="regulartext" onclick="deleteoffer(' + msgid + ',' + usrid + ');" style="float: right;">Remove</span><br />', 
       '<h4 class="boldheading_smaller">' + data.pro_name + '</h4><br /><br />', 
       '<span class="boldheading_smaller">Offer ' + data.accept_decline + '</span>', 
       '<div id="offer_details_' + msgid + '" style="margin-top: 10px; display: none;"><div style="width: 140px; float: left; margin-left: 10px;"><h4 style="display: inline; font-size: 11px; color: #333337; font-family: Verdana;">My</h4><h4 style="display: inline; font-weight: normal; font-size: 11px; color: #333337; font-family: Verdana;">Offer</h4><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">Food: </p><img src="_img/profile/' + data.food + '.png" /><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">Drinks: </p><img src="_img/profile/' + data.drink + '.png" /><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">Accommodation: </p><img src="_img/profile/' + data.accommodation + '.png" /><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">Travel Expenses: </p><img src="_img/profile/' + data.travel + '.png" /><br style="font-size: 1px; line-height: 2px;"/><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">Extra Fee: </p><p style="margin: 0px; font-size: 11px; color: #333337; font-family: Verdana; font-weight: bold; display: inline;">' + data.currency + '' + data.fee + '</p></div><div style="width: 190px; float: right;"><h4 style="display: inline; font-size: 11px; color: #333337; font-family: Verdana;">Event</h4><h4 style="display: inline; font-weight: normal; font-size: 11px; color: #333337; font-family: Verdana;">Details</h4><br style="font-size: 1px; line-height: 2px;"/><p style="line-height: 2px; padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_name + '</p><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_ad1 + '</p><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_ad2 + '</p><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_county + '</p><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_country + '</p><br /><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.venue_zip + '</p><br /><br /><p style="margin: 0px; font-size: 11px; color: #333337; font-family: Verdana; font-weight: bold; display: inline;">Event Date: </p><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.event_date + '</p><br /><p style="margin: 0px; font-size: 11px; color: #333337; font-family: Verdana; font-weight: bold; display: inline;">Start Time: </p><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.event_s_time + '</p><br /><p style="margin: 0px; font-size: 11px; color: #333337; font-family: Verdana; font-weight: bold; display: inline;">End Time: </p><p style="padding-left: 5px; margin: 0px;" class="smalltext_para">' + data.event_e_time + '</p><br /></div><div style="float: left; width: 300px; height: 90px; margin-left: 99px; margin-top: 10px;"><h4 style="padding-top: 5px; display: inline; font-size: 11px; color: #333337; font-family: Verdana;">Message:</h4><br/><p style="padding-bottom: 3px; margin: 0px;" class="smalltext_para">' + data.pro_msg + '</p></div></div>', 
       '<span style="margin-top: 20px; position: relative; bottom: 0px; right; 0px; float: right;" class="boldheading_smaller" id="readreplytxt_' + msgid + '" onclick="readoffer(' + msgid + ')">Read More...</span>') 
       .prependTo("#offer_box_add"); 
      $("#offer_details_" + msgid).hide(); 

      $("#offersinfo").html(""); 
      $("#offersinfo").load("http://www.ahbeta.uni.me/_includes/offers_total.php?usrid=" + usrid); 
     } 
    }); 
} 

Answer 1

对于它的价值，这是不是jQuery的的限制，我我知道。

正如您在this fiddle中看到的那样，使用html属性的onclick事件绑定无论它们是在原始源中，还是在您的示例中动态附加在jQuery中都可以工作。

很难在没有看到整个页面代码的情况下进一步调试，但更可能是您的追加逻辑出了问题。此外，请在onclick属性（alert(msgid)而不是readoffer(msgid)）中添加警报，然后查看该功能是否有效 - 如果有的话，readoffer功能有问题。

最后 - 是否有一个原因，你没有绑定与jQuery事件追加新的HTML后？您可以使用类来识别按钮，并通过闭包访问msgid。

简单的例子：

function respondoffer(msgid) { 
    $('#target') 
     .append('<span class="readoffer">read more...</span>') 
     .find('.readoffer').click(function() { 
      readoffer(msgid); 
     }); 
} 

Answer 2

它可以是一个范围问题与jQuery的DataTable了。我刚刚遇到了类似这样的问题：

<script> 
function foo() { 
    alert("Squeek"); 
} 

$(function() { 
    window.MyDataTable = $('#MyDataTable').dataTable(); 
    window.MyDataTable.fnAddData(["foo", "<span onclick='foo()'>SQUEEK</span>"]); 
}); 
</script> 

单击span时，foo从未被调用过。如果我用直接警报取代它，它确实有效。奇怪的。

当我明确地设置窗口的范围为foo()它得到了修正：

<script> 
function foo() { 
    alert("Squeek"); 
} 
window.foo = foo; 

$(function() { 
    window.MyDataTable = $('#MyDataTable').dataTable(); 
    window.MyDataTable.fnAddData(["foo", "<span onclick='window.foo()'>SQUEEK</span>"]); 
}); 
</script> 

然后它的工作。