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功能存在问题。

最后 - 你有没有理由在追加新HTML后你没有用jQuery绑定事件？您可以使用类来标识按钮，并通过闭包访问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从未被调用过。如果我用直接警报替换它，它确实有效。 WEIRD。

当我明确设置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>

然后它奏效了。

追加后，JS onClick无法正常工作

2 个答案: