Блог

Я пытаюсь изменить innerHTML div при нажатии. Я динамически сгенерировал массив divs, и я хочу получить конкретный доступ к таблице, на которую нажал пользователь.

Я попытался динамически задавать идентификатор таблиц в коде JavaScript:

 (for var i=0;i<array.length;i  ){
  var IDvalue = "foo";
  // append table to HTML string.
  html  = "<div onclick='modifyInnerHTML(""   IDvalue   "")'>...</div>";
  var divs = document.getElementsByTagName('div');
  divs[divs.length-1].id=array[i].IDvalue;
}
 

Затем в modifyInnerHTML() Я получаю доступ к элементу по идентификатору:

 function modifyInnerHTML(id){
  document.getElementById(id).innerHTML ="Add an update";
}
 

Хотя я думаю, что этот код должен работать нормально, он нарушает document.getElementById(id) функцию, и я понимаю, что идентификатор divs не задается динамически. Любые мысли о том, почему это может быть или есть более быстрые способы сделать это?

Заранее спасибо!

Для этого лучше использовать библиотеку манипуляций с DOM, например jQuery.

Что касается событий, jQuery позволит вам определять их гораздо более надежным способом. В любом случае вам следует избегать определения обработчиков событий в атрибутах, лучше прикрепите их к DOM, используя ссылки на элементы или, что еще лучше, наборы элементов jQuery.

Случай 1: Сгенерируйте некоторые divs динамически с уже установленным обработчиком событий:

 for(var i = 0; i < 10;   i) {
    $("<div>")
        .addClass("clickable-div")
        .html("click me!")
        .on("click", function() {
            $(this).html("You clicked me!");
        })
        .appendTo("body");
}
 

Случай 2. добавьте обработчик событий ко всем div s, которые содержат класс clickable-div

 $("div.clickable-div").on("click", function() {
    $(this).html("You clicked me!");
});
 

С помощью jQuery все делается намного быстрее, чем с тем, что вы написали бы на чистом JS.