動態表格行，點擊事件代理到新添加的元素

首先只想提一提，我幾乎經歷過所有類似的問題，並且我的案例中沒有解決方案和建議。動態表格行，點擊事件代理到新添加的元素

我有這樣的構造DEMO和下面的代碼添加一個新的元素到表中。我喜歡新的元素，它是一個tr和td，與已經存在的元素具有相同的功能。我試過live（）和delegate（），沒有任何作用。所有的建議和教程指向我已經使用的on（）函數，但仍然不起作用。我究竟做錯了什麼？請，任何建議將不勝感激。下面代碼添加了新的元素：

$(function(){ 
    $('#add').on('click',function() { 
     $('#edit-tb tr:last').after('<tr><td><button class="up">Up</button></td><td><span class="times" data-myval="1"></span>Goe</td><td><button class="down">Down</button></td></tr>'); 
    }); 
});

來源

2016-04-21 Khkhy

你必須要父母的參考 – RRR

您應該（）'文檔更仔細地閱讀jQuery的'。您必須將字符串選擇器和綁定事件傳遞給任何靜態容器 –

事件代表團捕獲容器上的事件，而只是調用回調函數，如果目標元素或父母之一有一定的選擇。要委派一個事件，您使用.on()將事件附加到父項，但添加第二個參數，該參數聲明目標。例如：

$('.table') // container 
     /* event , target, handler */ 
    .on('click', '.up' , function() {});

您應該將事件處理程序附加到密閉容器中，.table或事件.table > tbody，如果你想綁定忽略標題。

演示（fiddle）：

$(function() { 
    $('.table') 
    .on('click', '.up', function() { 
     var element = $(this); 
     var count = element.closest('tr').find('.times').attr('data-myval'); 
     count++; 
     if (count > 4) { 
     count--; 
     $('#max').modal('show'); 
     element.closest('tr').find('.times').text(4 + ' x '); 
     } 
     element.closest('tr').find('.times').attr('data-myval', count); 
     element.closest('tr').find('.times').text(count + ' x '); 

    }) 
    .on('click', '.down', function() { 
     var element = $(this); 
     var count = element.closest('tr').find('.times').attr('data-myval'); 
     count--; 
     parseInt(element.closest('tr').find('.times').attr('data-myval', count)) 
     element.closest('tr').find('.times').text(count + ' x '); 
     if (count < 2) { 
     element.closest('tr').find('.times').text(''); 
     } 
     if (count < 1) { 
     element.parents('tr').remove(); 
     } 
    }); 
});

來源

2016-04-21 10:15:36

你的事件代表團是不正確的。嘗試如下。

$(document).on('click', '.up', function() { 
    var count = $(this).closest('tr').find('.times').attr('data-myval'); 
    count++; 
    if (count > 4) { 
     count--; 
     $('#max').modal('show'); 
     $(this).closest('tr').find('.times').text(4 + ' x '); 
    } 
    $(this).closest('tr').find('.times').attr('data-myval', count); 
    $(this).closest('tr').find('.times').text(count + ' x '); 
}); 

$(document).on('click', '.down', function() { 
    var count = $(this).closest('tr').find('.times').attr('data-myval'); 
    count--; 
    parseInt($(this).closest('tr').find('.times').attr('data-myval', count)) 
    $(this).closest('tr').find('.times').text(count + ' x '); 
    if (count < 2) { 
     $(this).closest('tr').find('.times').text(''); 
    } 
    if (count < 1) { 
     $(this).parents('tr').remove(); 
    } 
});

UPDATED FIDDLE

來源

2016-04-21 10:07:54 Azim

動態表格行，點擊事件代理到新添加的元素

回答

相關問題