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> 

然後它的工作。