добавление функции нажатия кнопки динамически

Question

У меня есть кнопка удаления на столе и jquery на клике eventlistener для кнопки. здесь код

$(".delbtn").click(function() { 
    var count = 0; 
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
     if(count == 0){delFund = item.innerHTML} 
     if(count == 1) {delOrg = item.innerHTML} 
     if(count == 2) {stat = item.innerHTML }  
     count++ 
    }); 

//the below lines of codes would display how to show values on a browser like 
// firefox or chrome. 
//console.log(delFund, delOrg); 


    $(this).closest("tr").fadeTo(500, 0, function() { 
     $(this).remove(); 
    }); 


//update the item on the database table for deletion. 
    $.ajax({type: "POST", 
      url: "dbfunctions.jsp", 
      data: {TYPE:'D', fundval: delFund, orgval: delOrg, tuidval:tuid, status:stat }}).done(function(msg) 
      { 
      //alert(msg); 
      }); 

}); 

Это все работает отлично, моя проблема заключается в том, что я запрос к базе данных, которые я затем используется для обновления HTML таблицы с этими данными, и я добавить новую кнопку в последней строке на столе , Однако кнопка не реагирует, когда я нажимаю на нее. Я считаю, потому что к нему не присоединился слушатель событий. Итак, мой вопрос: как я могу обновить кнопку, чтобы прослушиватель событий, который я уже добавил ко всем предыдущим кнопкам, также привязан к новой динамически сгенерированной кнопке?

вот фрагмент кода того, как я добавляю элемент в конец моей таблицы.

$("#thisTable > tbody").append( 
             "<tr><td>"+thisfund.value+"</td>"+ 
             "<td>"+thisorg.value+"</td>"+ 
             "<td>"+'PENDING ACCESS'+"</td>" + 
             "<td>"+"<a class='delbtn' href='#'>X</a>"+"</td></tr>"); 
     thisfund.value = "";// set the input boxes back to null 
      thisorg.value = ""; 

      }); 

Answer 1

Попробуйте этот человек:

API:

Метод http://api.jquery.com/on/ .он() присоединяет обработчики событий к выбранному набору элементов в объекте JQuery.

Любые имена событий могут использоваться для аргумента событий. jQuery будет проходить через стандартные типы событий JavaScript браузера, вызывая функцию обработчика, когда браузер генерирует события из-за действий пользователя, таких как щелчок.

В вашем случае, даже если новый tr с class='delbtn', событие .on примет это.

Надеется, что это помогает,

коду

$(document).on('click','.delbtn',function() { 
    var count = 0; 
    var $row = jQuery(this).closest('tr'); 
    var $columns = $row.find('td'); 

    var values = ""; 

    jQuery.each($columns, function(i, item) { 
     if(count == 0){delFund = item.innerHTML} 
     if(count == 1) {delOrg = item.innerHTML} 
     if(count == 2) {stat = item.innerHTML }  
     count++ 
    }); 

Answer 2

Попробуйте

$(newButton).bind('click',function(){...}) 

Answer 3

Событие нажмите на .delbtn не живое событие, и не применяется к вновь присоединенных элементов.

В зависимости от используемой версии JQuery вы можете использовать одно из следующих действий для добавления живого события.

$(selector).live(events, data, handler);    // jQuery 1.3+ 
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+ 
$(document).on(events, selector, data, handler);  // jQuery 1.7+