вызов выбранного элемента цикла в методе .onclick

Question

Я попытался вызвать метод addProject() со вторым аргументом как текущий выбранный элемент в цикле. Но ссылка на аргумент null, когда я позвонил addProject().

Я думаю, что ссылка на текущий выбранный аргумент в цикле теряется, когда я использую кнопку .onclick. Но как я могу дать этот аргумент методу другим способом?

$(document).ready(function() { 
    for (var i = 0; i <= proj_array.length - 1; i++) { 
     var h = document.createElement("h1"); 
     var p = document.createElement("p"); 
     p.innerHTML = proj_array[i].projectdescription; 
     h.innerHTML = proj_array[i].projectname; 

     $(".projectsList").append(h).append(p); 

     var button = document.createElement("button"); 
     button.style.width = "70px"; 
     button.style.height = "27px"; 
     button.innerHTML = "Add"; 

     $(button).addClass("enable"); 
     button.onclick = function() { 
      if ($(button).hasClass("enable")) { 
       addProject(this, proj_array[i]); 
      } 
     } 
     $(p).append(button); 
    } 
    $(".projectsList").accordion(); 
}); 

Answer 1

магазин как атрибут data-*:

var button = document.createElement("button"); 
$(button).data('proj', proj_array[i]); 

В onclick вы можете получить его:

if($(this).hasClass("enable")) { 
    addProject(this, $(this).data('proj')); 
} 

использовать Также $(this) не $(button) в обработчик щелчка.

Answer 2

Вам нужно закрыть:

(function(proj) { 
    $(button).on('click', function() { 
     if ($(this).hasClass("enable")) { 
      addProject(this, proj);  
     } 
    }); 
})(proj_array[i]); 

Или вы могли бы просто придерживаться JQuery и не усложнять это слишком много:

$(function() { 
    $.each(proj_array, function(i, proj) { 
     var h = $('<h1 />', {html: proj.projectdescription}), 
      p = $('<p />', {html: proj.projectname}), 
      button = $('<button />', { 
             width : '70px', 
             height : '27px', 
             html : 'Add', 
             'class':'enable' 
            }); 

     button.on('click', function() { 
      if ($(this).hasClass("enable")) { 
       addProject(this, proj);  
      } 
     }); 
     $(p).append(button); 
     $(".projectsList").append(h, p).accordion(); 
    }); 
});