Элементы jQuery внутри диалога jQuery перестают работать после вызова ajax

Question

<div id="divItems"><div id="divItemsContent"></div></div>

Думаю, я знаю, в чем проблема, просто не знаю, как ее решить.Вот код:

function SplitOrder() {
    var SplitTable = $.ajax({
        url: 'AjaxActions/SplitTable.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1],
        async: false
    }).responseText;

    var dialog = $('#divItems').dialog({
        autoOpen: false,
        height: 500,
        width: 600,
        title: 'פיצול שולחן'
    });

    var content = $("#divItemsContent");
    content.html("");
    content.html(SplitTable);
    dialog.dialog("open");
    //הפעולות על החשבונות
    /************************************************/

    $('#imgLeftArrow').click(

    function() {

        $(this).css("background-color", "white");


        //AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
        var SplitTable = $.ajax({
            url: 'AjaxActions/SplitUpdate.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1] + '&ItemID=' + $('#hidItemID').val() + '&ItemAmount=' + $('#hidItemAmount').val(),
            async: false
        }).responseText;

        content.html("");
        content.html(SplitTable);
    });


    $('#imgRightArrow').click(

    function() {
        //AJAX הבאת נתוני רשומת ההזמנה מהשרת ב
        var SplitUpdate = $.ajax({
            url: 'AjaxActions/SplitUpdate.aspx?FromObjectID=' + $('#hidObjectID').val() + '&ToObjectID=' + ObjectID[1] + '&ItemID=' + $('#hidItemID').val() + '&ItemAmount=' + $('#hidItemAmountTo').val(),
            async: false
        }).responseText;
    });

    /************************************************/

    $('div[id^="Item_"]').hover(

    function(e) {
        $(this).css("cursor", "pointer");
        $(this).css("background-color", "blue");
    },

    //כשיוצאים מהשולחן DIVהעלמת ה


    function() {
        $(this).css("background-color", "white");
    });

    /************************************************/

    //טיפול בבחירת פריט להוספה/הורדה מהחשבון
    $('div[id^="Item_"]').click(

    function() {
        $('#imgLeftArrow').css("background-color", "yellow");

        //הוספת הפריט לשדה הנסתר
        $('#hidItemID').val($(this).children().html());
        $('#hidItemName').val($(this).children().next().html());
        $('#hidItemAmount').val($(this).children().next().next().html());

    });
}​

Я пытаюсь отобразить одну страницу с помощью вызова ajax и вывести результат в диалоговом окне ... Это прекрасно работает !!!

Далее,если кто-то выбирает элемент и нажимает стрелку влево, я делаю другой вызов ajax, который обновляет базу данных и возвращает новый HTML (с использованием XML / SXL), и я также получаю правильный результат из этого.Я получаю первое наведение и щелчок работает отлично, но после обновления данных и получения результата наведение перестает работать, а также событие щелчка на стрелке.Я думаю, это потому, что я рендерил данные внутри функции события click, но я не знаю, как ее решить.

Answer 1

Если вы возвращаете HTML и ожидаете, что в элементах нового возвращенного html будут происходить события щелчка и всплывающие подсказки, вам необходимо использовать ключевое слово .live () jQuery.

Обновление: Начиная с jQuery 1.7, метод .live() устарел (больше не существует, начиная с 1.9!). Используйте .on() для присоединения обработчиков событий. Пользователи более старых версий jQuery должны использовать .delegate() вместо .live().

Answer 2

Мне кажется, я понимаю, что вы пытаетесь сделать ...

Если какой-либо из HTML-кодов содержится в этих утверждениях:

$('#hidItemID').val($(this).children().html());
$('#hidItemName').val($(this).children().next().html());
$('#hidItemAmount').val($(this).children().next().next().html());

Содержит jQuery, он будет отображаться какобычный HTML, потому что они добавляются в DOM после привязки события.То, что предложил Григс, будет работать.

Вам понадобится что-то похожее на:

$('div[id^="Item_"]').live('hover', function(event) {
    // do something on hover
});

$('#imgLeftArrow').live('click', function(event) {
    // do something on click
});

$('#imgRightArrow').live('click', function(event) {
    // do something on click
});

Таким образом, новые элементы также будут вызывать обработчики.