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

动态创建的按钮会自动触发

2 个答案: