Question

想象一下：我有多个带有attr“data-question-id”的div，在这个div中我有一个或多个输入，可能有也可能没有attr“has-next-question”。请参阅以下示例：

<div data-question-id="5">
<input type="radio" has-next-question="true" value="2"> test1
<input type="radio" value="3"> test2
</div>

<div data-question-id="6">
<input type="radio" has-next-question="true" value="5"> test3
<input type="radio" has-next-question="true" value="7"> test4
</div>

正如你在第一个div中看到的，我有两个输入，但是一个没有attr“has-next-question”。我的问题是，如何在具有attr“data-question-id”的父div的输入上绑定click事件，并且此div至少具有attr“has-next-question”的输入。

我已经完成了这个：

$(document).on('click', 'div[data-question-id] input', function(e) {
          alert('click');
});

任何帮助？谢谢你们

编辑：更改了attr“has-next-question”，因为它的html属性无效。

想象一下：如果我点击“test1”它应该触发事件，但如果我点击“test2”它也应该，因为带有attr“data-question-id”的父div至少有一个输入attr“has-next-question”，对应于“test1”。如果在父div中没有attr“has-next-question”输入，则事件不应该触发。

Answer 1

你是为div做的，所以重复一遍。

div[data-question-id] input[has-next-question]

Demo

Answer 2

只需扩展您的选择器：

$(document).on('click', "div[data-question-id] input[has-next-question='true']", function(e) {
          alert('click');
});

Answer 3

它不正确的HTML。 has-next-question不是有效的属性。

但这应该有效，

$(document).on('click', 'div[data-question-id] input[has-next-question]', function(e) {
          alert('click');
});

编辑:(原始问题更改后），

不，你不能做出选择。 jQuery使用CSS选择器，它们从子节点到父节点不起作用。

但是，你可以这样做，

$(document).on('click', 'div[data-question-id] input', function(e) {
       if($(this).parent().find('[has-next-question]').length === 0 ) return;

       // Other code which needs to be executed.
});

即。如果父级没有具有[has-next-question]属性的子级，则从函数中出来。

点击事件输入的jquery

3 个答案: