0

I have some code that appends a new DIV upon the success of an AJAX request. The appended div contains a link with an onclick. However it doesn't work.

Code for appended link:

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

This is the code that is used to do the append itself - its this onclick that doesn't work on the newly created div. I can't figure out why!

EDIT: The result of the append itself is correct, i.e. onclick="readoffer('+ msgid +')" displays as onclick="readoffer(29)"

Edit: Enitre function

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 に動的に追加されているかに関係なく機能します。

ページ コード全体を表示せずにさらにデバッグすることは困難ですが、追加ロジックに問題がある可能性が高くなります。また、アラートを 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);
        });
}
于 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 に答える