Question

我正在使用jQuery和jQuery Mobile（1.3.2）使用Phonegap创建一个应用程序。我根本没有找到一种方法来获得动态创建的按钮。我正在使用一个锚作为按钮，因此“按钮（'刷新'）”什么都不做。

首先，我在HTML中定义了一个按钮，如下所示：

<a data-role="button" data-icon="plus" data-iconpos="right" id="addNewStep">Add a step</a>

然后我有Javascript，为这个按钮添加一个动作，如下所示：

$('#addNewStep').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    addStepDiv();
});

WORKS上方的按钮，它会创建一个包含锚点按钮的新ul元素。那个锚按钮是我无法工作的按钮。因为我有一些造型选择，所以有点乱。多行字符串有效，因为显示了整个元素。 addStepDiv（）：

function addStepDiv() {
    stepDiv = '<ul class="newStepList containerBox" data-role="listview" data-inset="true" data-dividertheme="a"> \
    <li data-role="list-divider" data-dividertheme="a"> \
        <span style="float: left; margin-top: 7px;">Title</span> \
        <a data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="notext" class="delStepButton"></a> \
        <br style="clear: both;" /> \
    </li> \
        <li>Text</li> \
    </ul>';

    // Adds the above div under the "Add a step" -button
    $('#addNewStep').parent().append(stepDiv).trigger('create');
}

删除按钮应该可以执行某些操作。现在我已经发出警报，看看按钮是否正常工作。没有显示警报。

$('.delStepButton').click(function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();

    alert("Delete button");
});

其他一切都有效。 “添加步骤”按钮创建了ul元素并且显示正确，并且还显示“删除”按钮，但单击它时没有任何反应。

//编辑：我觉得自己像个白痴...非常感谢你的回答（Sridhar R＆amp; JCabello）。问题已解决：

$(document).on('click', '.delStepButton', function (e) {
    //Do stuff here.
});

Answer 1

由于.delStepButton元素是动态创建的，因此您需要使用事件委派来为这些元素注册事件处理程序。

当您使用$('.delStepButton').click(....);注册事件处理程序时，它会将句柄只注册到代码执行时已存在于dom中的那些元素，在这种情况下，因为这些元素是在此之后创建的处理程序不会附加到新创建的元素

试试这个

$(document).on('click','.delStepButton',function (e) {
    e.preventDefault();
    e.stopImmediatePropagation();
    alert("Moi");
});

Answer 2

尝试将侦听器附加到文档而不是项目本身，因为在放置侦听器时它不存在。

$(document).on('click', '.delStepButton', function (e) {
    //Do stuff here.
});

JQM：动态创建的按钮不执行任何操作

2 个答案: