Question

我希望标题有意义 - 如果可以改进，请随时编辑它。

我有一个点击功能，应该返回true或false，具体取决于我是否点击了某个列表中的某些内容。列表<ul>标记的标识但其中的<li>单元没有。它们也没有匹配的类，也没有任何其他属性。它们是由服务器在运行时生成的，所以我无法知道将会有多少（无论如何都不应该）。

我想知道的是如何使用 jQuery.click（）函数验证用户是否已点击其中一个？我想象的逻辑是：

if (clickedElement == "#someList li")
    return true:

但我相信这是不可能的。 另外： "#someList li"不是静态值。这是真实应用程序中的参数，可以像"#someDiv div"。有没有更好的方法来实现这个逻辑？我附上了相关代码的小提琴：https://jsfiddle.net/6ct245pj/5/

HTML：

<ul id="someList">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

JS / jQuery的：

$("body").click(function (event) {
    var clickedId = event.target.id;
    var clickedElement = "???";
    //alert(clickedId);

    if (clickedElement == "#someList li") //is it possible to make this true?
    {
        alert("match!!");
    } else {
        alert("no match");
    }

});

Answer 1

由于您说li元素已生成且您无法修改它们，因此请测试tagName

＆＃13;

$("body").click(function(event) {
  var clickedElement = event.target.tagName;

  if (clickedElement == "LI") {
    document.write("match!!");
  } else {
    document.write("no match");
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="someList">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

＆＃13;

另一种方法是，您可以将点击处理程序附加到所需的元素本身。这样，可以保证处理程序将为仅

这些元素执行

＆＃13;

$("#someList").on('click', 'li', function(event) {
  document.write("match!!");

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="someList">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

＆＃13;

<强>更新

换句话说，＃oneslist li是点击处理程序中的参数功能

您可以将它抽象为函数并与传递的选择器绑定

＆＃13;

function assignHandler(selector) {
  $(selector).on('click', 'li', function(event) {
    document.write("match!!");
  });
}

assignHandler("#someList");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul id="someList">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

＆＃13;

Answer 2

这是使用正确选择器的问题。 #someList li是指li

的#someList个孩子

HTML：

<ul id="someList">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

jQuery的：

$('body').on('click','#someList li',function() {
    alert('clicked');
});
/* OR, if the `li` elements are not dynamic: */
$('#someList li').click(function() { /* code */ });

如果您点击其他任何地方，则不会触发alert。

http://jsfiddle.net/g4s6wwLa/

Answer 3

您想使用jQuery的.is()功能。请使用您的示例查看以下代码：

$("body").click(function (event) {
    var clickedId = event.target.id;
    var clickedElement = $(event.target);
    //alert(clickedId);

    if (clickedElement.is("#someList li")) //is it possible to make this true?
    {
        alert("match!!");
    } else {
        alert("no match");
    }

});

Answer 4

你总是可以尝试这样的事情来重申所有项目。

$("body").click(function (event) {
    var clickedId = event.target.id;
    var clickedElement = "???";
    //alert(clickedId);

    var list = document.getElementById("someList"); 
    var items = list.getElementsByTagName("li");

    for (var j = 0; j < items.length; ++j) {
        if (list.getElementsByTagName("LI")[j].innerHTML == "item 1") {
            alert("match!!");
        } else {
            alert("no match");
        }
    }
});

可以jQuery $（'body'）。click（）捕获我点击了没有class / id的嵌套元素吗？

4 个答案: