使用jQuery在不使用ID和Name的情况下实现跨度的单击事件

Using jQuery to realize a click event for a span without using ID and Name

本文关键字：实现 情况下 事件 单击 Name jQuery ID 使用      更新时间：2023-09-26

如何使用jQuery点击如下所示的span选项卡？

像这样：

<span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
    Expand<span></span>Search</span>

您可以在span中添加一个css类，并将该css类用作注册click事件的jQuery选择器

<span class="myspan" id="someId">Test</span>
<span class="myspan" id="someOtherId">Test Again</span>

jQuery代码将是

$(function(){
   $("span.myspan").click(function(e){
     alert("clicked");
     var itemId=$(this).attr("id");
     alert(itemId);
   });
});

这是的工作样本

如果不能向该跨度添加css类或其他属性，则可能需要使用非常宽的jQuery选择器，它只是span标记。

$("span").click(function(e){
  alert("clicked");
});

但此单击事件将注册到页面中所有span的。另一种选择是将这些跨度封装在容器div中，并在jQuery选择器中使用它，这样只有这些跨度才会被注册用于单击事件。

<div id="myContainer">
   <span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
                                                          Expand<span></span>Search</span>
</div>

注册点击事件的jQuery代码将是

$(function(){
     $("#myContainer span").click(function(e){
     alert("clicked");
   });
});

这是一个工作样本。

jQuery几乎可以接受任何CSS选择器。

因此，如果你不想使用类或id（你应该这样做），有两个选项：

  1. 阅读有关CSS选择器的内容并找到合适的选择器
  2. 打开浏览器中的检查器工具，右键单击跨度元素，然后选择选项"复制唯一Selector"（Firefox）或"Copy>Copy Selector"为元素自动生成选择器

然后与jQuery一起正常使用：$("copy_pasted_probably_very_long_selector").click()

1st:在html中使用

</span><span>Search</span>

而不是

 <span></span>Search</span>

第二次：当您为点击事件标记javascript/Jquery时，您可以使用.filter()

$('span').filter(function(){
   return $(this).text().trim() == 'Expand';
}).on('click' , function(){
      //code here for Expand span
});

工作演示这将适用于扩展span。。使用与搜索一个相同的方法

您可以使用event对象来查找nodeType

HTML

<span class="item-content">Button 1 </span>
<span class="item-content">Button 2 </span>
<div class="item-content">Button 3 </div>
<button class="item-content">Button 4 </button>

JS-

$('body').on('click',function(event){
alert(event.target.nodeName)
})

事件对象有许多其他键，这些键在需要时也很方便。您只需console.log(event)即可查看其他密钥。

工作模型

注意：我使用了多个标签只是为了演示。虽然每个元素都有一个类，但我只是将其用于样式设计。

希望这将是有用的

相关文章：