Как предотвратить запуск события onclick динамической кнопки при рендеринге?

Question

У меня есть сценарий jquery, который динамически добавляет кнопки с событием onclick(). Событие Onclick() просто вызывает некоторую другую функцию JavaScript. JQuery отлично работает в том, что он создает кнопки динамически, но onclick() событий триггеров без нажатия. Я положил сообщение об отладке в someFunction и увидел его number_of_created_buttons раз, что означает, что событие onclick запускает событие. Как предотвратить такое странное поведение? Я хочу, чтобы onClick событие срабатывало только при нажатии пользователем кнопки.

Мой сценарий заключается в следующем:

<script> 
    $(document).ready(function() { 
     $('#getXmlFiles').click(function() { 
      $.get('/getUserDocs', function(responseJson) { 
       $("#docsDiv").empty(); 
       var $table = $('<table>').appendTo($('#docsDiv')).width('100%'); 
       $.each(responseJson, function(index, item){ 
        var $btn = $('<button/>', 
        { 
         text: 'Action', 
         style:'width:100%', 
         click: someFunction(item) 
        }); 

        $('<tr>').appendTo($table) 
         .append($('<td>').text(item)) 
         .append($('<td>').append($btn)); 

       }); 
      }); 
     }); 
    }); 
</script> 

Answer 1

Измените ваш click к этому один:

click: function() { 
    someFunction(item); 
} 

---

Это происходит потому, что вы сразу же вызова someFunction на click. Вы должны установить для него обратный вызов. Как и выше.

Answer 2

Я думаю, что это происходит потому, что вы вызываете функцию, когда вы просто хотите назначить ее как обработчик события. Попробуйте этот код и посмотреть, если это помогает:

var $btn = $('<button/>', 
{ 
    text: 'Action', 
    style:'width:100%', 
    click: someFunction // note the missing brackets 
}); 

Answer 3

Я думаю, что вы можете избежать присоединения обработчика события к каждому из события кнопки, а просто добавить класс к кнопкам и писать делегированного обработчик события, присоединив его к тому же классу, как таким образом

Jquery кОД:

 $(document).ready(function() { 
     $('#getXmlFiles').click(function() { 
      $.get('/getUserDocs', function(responseJson) { 
      $("#docsDiv").empty(); 
      var $table = $('<table>').appendTo($('#docsDiv')).width('100%'); 
      $.each(responseJson, function(index, item){ 
       var $btn = $('<button/>', 
       { 
        text: 'Action', 
        style:'width:100%', 
        //click: someFunction(item) 
        class:'trg' 
       }); 

       $('<tr>').appendTo($table) 
         .append($('<td>').text(item)) 
         .append($('<td>').append($btn)); 

      }); 
      }); 
     }); 

     $(document).on('click','.trg',function(){ 
      //code to handle click event for all dynamic buttons here 
     }); 
    }); 

Таким образом, событие щелчка обыкновение называться, пока не срабатывает вручную и код выглядит аккуратно.

Счастливый Coding :)