Question

我的观点中有以下按钮：

<td>    
<?php 
$data = array(
    'name' => $id,
    'class' => 'do_the_job',
    'content' => 'Do the job'
             );
echo form_button($data);
?>    
</td>

当我点击那个按钮时它会按照我的预期执行，因为我在EXTERNAL JS文件中有以下功能

$(document).ready(function() {
        $(".do_the_job").click(function() {
   //does the job
});
});

我还有另一个控制器和视图，我使用jquery动态创建了按钮（具有相同的类）：

table.html('<button name="'+id+'" class="do_the_job">Do the job</button>');

问题在于，当我点击该按钮时，它不起作用，尽管该按钮与第一个按钮具有相同的类，并且它应该按照我的EXTERNAL JS文件中描述的那样进行工作。

我研究过并发现我应该使用函数on（）而不是click（）。我已经按照以下方式修改了我的外部JS文件，但它仍然不起作用：

$(".do_the_job").on("click", function() {      
   //does the job
});

请你帮我解决问题。

Answer 1

在您的用例中，您希望以不同的方式使用on，您仍然可以使用click方法绑定您的事件（假设add_to_trip是您之前称为{的do_the_job {1}}）。你想要的是：

$("#static_parent_element").on(
    "click",
    ".add_to_trip",
    function () {/*Do the job*/}
);

这将检查静态容器中元素与给定匹配器的传播事件，允许您动态添加和删除元素。

Answer 2

这可能是因为直接事件监听器。在您的情况下，您可以考虑委托事件监听器。

例如，如果你有Html代码

<!DOCTYPE html>
<html>
<body>

<button type="button" id="foo" class ="dothisjob" >Foo</button>
<button type="button" id="bar" class ="dothisjob" >Bar</button> 
</body>
</html>

如果您的事件监听器是这样编写的

$(".dothisjob").on("click", function() {...});

这将只处理在页面加载时添加的静态类的单击事件。（直接事件监听器）

如果您动态添加class='dothisjob'，则此点击事件监听器无法工作 addclass('dothisjob') toggleclass('dothisjob')。

为了处理动态添加的类的事件侦听器，您应该使用委托的事件侦听器。

要实现这一点，您应该对页面的某些静态元素负责。（委托事件监听器）

$("body").on("click", ".dothisjob", function() {...});

现在身体负责听取事件。如果你将.dothisjob动态地添加到body的一个子元素中，这将起作用。

Useful SO answer Direct vs. Delegated - jQuery .on()

两个按钮不能使用相同的外部js文件（在不同的视图中）

2 个答案: