Динамически созданная кнопка автоматически активируется

Question

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

for (i = 0; i < arrayID.length; i++) { 
    var listElement = '<li class="has-form">' + 
     '<div class="row collapse">' + 
     '<div class="small-1 columns" style="margin: 5px">' + 
     '<img src="image/twitter.png">' + 
     '</div>' + 
     '<div class="small-6 columns small-only-text-center">' + 
      '<p>' + 
       '<i>' + arrayText[i] + '</i>' + 
      '</p>' + 
     '</div>' + 
     '<div class="small-3 columns">' + 
      '<button type="button" class="large-10" onclick="' + onClickViewButton() + '">view</button>' + 
     '</div>' + 
     '<div class="small-1 columns">' + 
      '<input id="checkbox1" type="checkbox">' + 
      '</div>' + 
     '</div>' + 
    '</li>'; 
    $("#myList").append(listElement); 
} 

Код кнопки клик:

function onClickViewButton() { 
    alert('hello'); 
} 

Но, к сожалению, когда страница загружается, то нажатие кнопки обжигают и не работает на фактический щелчок кнопки. Пожалуйста, помогите.

Answer 1

Где у вас есть:

onclick="'+onClickViewButton()+'" 

вам нужно иметь:

onclick="onClickViewButton()" 

вместо этого.

Ваш текущий код вызывает функцию onClickViewButton в вашем объявлении, когда то, что вы действительно хотите сделать, - просто использовать его в качестве ссылки на функцию, чтобы впоследствии ее вызывали по адресу onclick.

Answer 2

Попробуйте с этим фрагментом:

Если вы CONCAT имя функции с скобкой, то она будет рассматриваться как выполнение функции, следовательно, функция будет вызвана.

for (i = 0; i < arrayID.length; i++) { 
    var listElement = '<li class="has-form">' + 
    '<div class="row collapse">' + 
    '<div class="small-1 columns" style="margin: 5px">' + 
    '<img src="image/twitter.png">' + 
    '</div>' + 
    '<div class="small-6 columns small-only-text-center">' + 
    '<p>' + 
    '<i>' + arrayText[i] + '</i>' + 
    '</p>' + 
    '</div>' + 
    '<div class="small-3 columns">' + 
    '<button type="button" class="large-10" onclick="onClickViewButton()">view</button>' + 
    '</div>' + 
    '<div class="small-1 columns">' + 
    '<input id="checkbox1" type="checkbox">' + 
    '</div>' + 
    '</div>' + 
    '</li>'; 
    $("#myList").append(listElement); 
}