0

我有一些代码在 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)"

编辑：整个函数

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);
        }
    });
}
4

2 回答 2

1

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

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

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

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

简化示例：

function respondoffer(msgid) {
    $('#target')
        .append('<span class="readoffer">read more...</span>')
        .find('.readoffer').click(function() {
            readoffer(msgid);
        });
}
于 2013-02-18T18:02:48.920 回答
0

这也可能是 jQuery DataTable 的范围问题。我刚刚遇到了一个与此类似的问题：

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

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

单击跨度时，从未调用过 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>

然后它起作用了。

于 2014-03-26T11:12:39.303 回答