動態創建的按鈕會自動觸發

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

嘗試使用以下代碼段：

如果將函數名稱與括號連接，則將其視為函數執行，因此將調用函數。

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);
}