按钮单击事件触发错误的事件处理程序
我有一个div显示一些可点击的音乐标题。 单击它时,它将显示更多详细信息。 然后我在可点击的div中也有一个按钮。 当我点击按钮。 它不会调用按钮的function而是div的function? 有办法解决这个问题吗? 谢谢!
$("#myComList").append(" ()
BY
"); $('#'+comListID).click(function() { $(this).find("li").slideToggle('slow', function() { }); $("#"+comListID+"btn").click(function(){ addNewArr(comListID); });
它被称为’冒泡’。 按钮位于div内部,因此它正在执行按钮,然后向上链接到div。 在button函数中添加event.stopPropagation()。
$("#"+comListID+"btn").click(function(event){ event.stopPropagation(); addNewArr(comListID); });
从jQuery文档:
默认情况下,大多数事件从原始事件目标冒泡到文档元素。 在整个过程中的每个元素,jQuery调用已附加的任何匹配的事件处理程序。 处理程序可以通过调用event.stopPropagation()来阻止事件在文档树中进一步冒泡(从而防止这些元素上的处理程序运行)。 然而,附加在当前元素上的任何其他处理程序都将运行。 为防止这种情况,请调用event.stopImmediatePropagation()。 (绑定到元素的事件处理程序的调用顺序与它们绑定的顺序相同。)
因此,您可以在按钮单击处理程序中调用event.stopPropagation()
,以停止触发div事件。
我相信我在不看代码的情况下理解你的问题。 它听起来的问题源于点击事件冒泡或传播。 下面是一个代码示例和一个小提琴的链接供您测试:
在这个函数中,:
e.stopPropagation();
阻止click事件过滤到其父容器(在本例中为“testDiv”)并触发其click事件。 您可以在下面的jsfiddle中测试它并亲眼看看:
测试小提琴
编辑:
在你的情况下:
$("#"+comListID+"btn").click(function(e){ addNewArr(comListID); e.stopPropagation(); });
将事件参数添加到click函数并阻止它传播到父级。
希望这可以帮助。