Question

我有一个运行div的页面，我加载了一个php页面。在这个PHP页面中，我做了各种各样的事情，例如，其中一个是更改密码。当你点击＆＃34;保存＆＃34;时，它会运行以下内容（除了重要的一点之外，我已经取消了所有内容）。

function resetPass() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
}

这是使用名为bsFormAlerts的Bootstrap库，用于在PHP页面上创建的输入字段下显示警报。

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button" onclick="resetPass(this);">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

如果此输入位于index.html页面上，这可以正常工作，但由于它位于PHP文件中，因此将.load（）转换为HTML页面上的div，它不会调用

我的问题：我是否可以通过某种方式调用现在已经.load（）＆＃39;另一个文件的div，因为它似乎没有调用它？还有什么我可以尝试的吗？

提前致谢

Answer 1

我不确定我是否理解正确但尝试这样的事情：

$( "#page-wrapper" ).load( "ajax/test.html", function() {
  $(document).trigger("set-alert-id-password", [
  {
    message: "Must be at least 6 characters long",
    priority: "error"
  }
]);
});

Answer 2

因为按钮是动态添加的，并且在DOM树准备就绪时不存在，所以事件不会绑定。您还应该避免使用内联JS，但使用.on()将其迁移到事件绑定。

首先，我们删除按钮的内联JS：

<input type="password" class="form-control" disabled="true" value="******">
<span class="input-group-btn">
    <button class="btn btn-default" type="button">
        <i class="glyphicon glyphicon-edit"></i>
    </button>
    <span data-alertid="password"></span>
</span>

我们使用.on()将click事件绑定到您的按钮：

$(document).on('click', '.btn.btn-default', function() {
    $(document).trigger("set-alert-id-password", [
      {
        message: "Must be at least 6 characters long",
        priority: "error"
      }
    ]);
});

这样做的目的是倾听来自您的按钮的点击事件（包含类btn和btn-default ^[1]，最终会冒泡到document对象，因此它甚至可以源自最初不存在的动态添加元素（例如，在执行.load()之前）。

¹我觉得分配给按钮的类是通用的，所以你应该在jQuery中明确地选择一个唯一的标识符（比如ID）。

我无法从Javascript触发自定义事件

2 个答案: