Попытка получить значение с помощью кнопки с помощью javascript

Question

Итак, у меня есть несколько кнопок удаления на столе, и каждая кнопка имеет собственный уникальный идентификатор. Я пытаюсь получить это значение через javascript, но я не могу заставить его работать вообще.

Вот раздел JS, который работает должным образом и загружает правильный HTML (это выбежала для каждого фильма):

function createRow(movie) { 
     movie.NewDate = new Date(movie.ReleaseDate); 
     return '<tr><td><img class="movieImage" src="' + 
      movie.ImageLink + 
      '" alt="' + 
      movie.Title + 
      ' Image" style="width:50px;height:75px">' + 
      '<td>' + 
      movie.Title + 
      '</td><td>' + 
      movie.NewDate.toLocaleDateString("en-US") + 
      '</td><td><button type="button" class="removeButton" value="' + movie.DVDID + '">Delete</button></td></tr>'; 
    } 

А вот и JS, где я пытаюсь получить идентификатор:

$(document) 
.ready(function() { 
    var deleteButtons = $(".removeButton"); 
    deleteButtons.each(function (index) { 
     var currentButton = $(this); 
     var buttonValue = currentButton.val(); 
     currentButton.click(function() { 
      alert(buttonValue); 
     }); 
    }); 
}); 

Я нашел последний фрагмент кода с помощью Click one of multiple buttons, put value in text input

прямо сейчас просто получить надлежащее уведомление было бы достаточно.

Answer 1

Вы использовали этот подход: $ ("# tableId"). On ("click", ".removeButton", function() {alert ($ (this) .attr ("value"));})

Этот «on» связывает все элементы «.removeButton» с заданной функцией при нажатии кнопки.

Answer 2

Ваш Javascript должен выглядеть следующим образом:

$(document).ready(function() { 
    var deleteButtons = $(".removeButton"); 
    deleteButtons.on('click', function() { 
     alert($(this).attr('value')); 
    }); 
}); 

Кроме того, поскольку Вы добавляете эти кнопки динамически с JavaScript, вам может понадобиться пересвязать кнопку щелчка события после добавления новой строки. Также привязка должна быть выполнена после загрузки кнопки html в DOM.

Answer 3

Поскольку вы динамически создаете кнопки, вы не сможете связаться с ними должным образом, потому что при запуске javascript они не существуют в DOM. Так для того, чтобы быть в состоянии найти кнопки, вы должны смотреть на объем документов, а затем найти какую кнопку (класс) вы нажимаете на, например, так:

$(document).on('click', '.removeButton', function(){ 
    console.log($(this).val()) 
}) 

See fiddle for complete example