草庐IT

Jquery在委托事件上获得点击元素

codeneng 2023-03-28 原文

Jquery get clicked element on delegated event

我见过类似的问题，但他们没有解决这个问题。我有一个看起来像这样的 html：

1
              <i class="fa fa-close">

所以，在委托事件触发后，我想获取 元素。但是 $(this) 表示父 元素。

1
2
3
$("#products").on("click",".delete_product", function(){            
        console.log($(this).hasClass(".delete_product"));
}

当然，控制台记录错误。如何获得点击的元素？

$(this).find(".delete_product") 不是一个选项，因为 delete_product 类有很多元素。

  • 您可以使用 var 声明。 var that = $(this).find(.delete_product); 在函数内部，并且您将在变量中拥有该按钮。还是我错了？
  • @Mardzis 不能这样做，因为 .delete_product 类有很多元素。
  • $(this) 应该是您的链接
  • 所以也许 $(#products .delete_product) ？

您需要使用事件的目标属性。这是代码，它将为您提供确切的 .delete_product.

1
2
3
4
5
$("#products").on("click",".delete_product", function (ev) {
    var $t = $(ev.target);
    $t = $t.is('.delete_product') ? $t : $t.parents('.delete_product');
    console.log($t.hasClass("delete_product"));
});

  • 当 a 链接具有子元素(如 Hellothere)时，此操作会失败。当单击这些子元素之一时，目标将不是 a 元素，而这仍然是委托事件处理程序的目的。
  • 是的，这就是我们检查目标是否为 .delete_product 的原因。如果没有，则在该类中找到其父级。假设任何孩子/父母没有类delete_product，这使它成为 children 证明。说得通？ $t = $t.is(.delete_product) ？ $t : $t.parents(.delete_product);这条线使它成为 children 证明。 :)
  • 您添加了 if 并且是的，在该条件下它可以工作，但是 jQuery 已经完成了这项任务......最好利用它。

试试这个：

1
2
3
4
5
6
7
8
9
$(document).ready(function(){

    $("#products").on("click",".delete_product", function(){  

        alert($(this).hasClass("delete_product"));

    })

})

最终代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
    This is test
    <head>
        <style>  
        </style>
    </head>
    <body>
       
       
           
           
               
                 
                      <i class="fa fa-close">Click Me!                  
                 
               
           
           
   
       
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
       
           
        $(document).ready(function(){

            $("#products").on("click",".delete_product", function(){  

                alert($(this).hasClass("delete_product"));

            })

        })
       
       
    </body>
</html>

您不应该在 hasClass 参数中使用点。它不是选择器，而是您传递的名称：

1
2
3
$("#products").on("click",".delete_product", function(){
    console.log($(this).hasClass('delete_product'));
});

jQuery 确实提供了与选择器匹配的元素作为 this。如 jQuery 文档中所述：

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; [...] for delegated events this is an element matching selector.

仅供参考：当然还有另一种方法，您可以(并且应该)使用选择器(带点)：

1
2
3
$("#products").on("click",".delete_product", function(){
    console.log($(this).is('.delete_product'));
});

  • 否决投票者可以解释问题是什么吗？

Jquery在nbspsectionbrjquery

有关Jquery在委托事件上获得点击元素的更多相关文章

  1. ruby - 无法在 60 秒内获得稳定的 Firefox 连接 (127.0.0.1 :7055) - 2

    我使用的是Firefox版本36.0.1和Selenium-Webdrivergem版本2.45.0。我能够创建Firefox实例，但无法使用脚本继续进行进一步的操作无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)错误。有人能帮帮我吗？ 最佳答案 我遇到了同样的问题。降级到firefoxv33后一切正常。您可以找到旧版本here 关于ruby-无法在60秒内获得稳定的Firefox连接(127.0.0.1:7055)，我们在StackOverflow上找到一个类

  2. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  3. ruby - 在哈希的键数组中追加元素 - 2

    查看我的Ruby代码:h=Hash.new([])h[0]=:word1h[1]=h[1]输出是:Hash={0=>:word1,1=>[:word2,:word3],2=>[:word2,:word3]}我希望有Hash={0=>:word1,1=>[:word2],2=>[:word3]}为什么要附加第二个哈希元素(数组)？如何将新数组元素附加到第三个哈希元素？ 最佳答案 如果您提供单个值作为Hash.new的参数(例如Hash.new([])，完全相同的对象将用作每个缺失键的默认值。这就是您所拥有的，那是你不想要的。您可以改用

  4. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  5. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  6. ruby-on-rails - 事件记录 : Select max of limit - 2

    我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).

  7. ruby - Hanami link_to 助手只呈现最后一个元素 - 2

    我是HanamiWorld的新人。我已经写了这段代码:moduleWeb::Views::HomeclassIndexincludeWeb::ViewincludeHanami::Helpers::HtmlHelperdeftitlehtml.headerdoh1'Testsearchengine',id:'title'hrdiv(id:'test')dolink_to('Home',"/",class:'mnu_orizontal')link_to('About',"/",class:'mnu_orizontal')endendendendend我在模板上调用了title方法。htm

  8. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  9. ruby - 将n维数组的每个元素乘以Ruby中的数字 - 2

    在Ruby中，是否有一种简单的方法可以将n维数组中的每个元素乘以一个数字？这样:[1,2,3,4,5].multiplied_by2==[2,4,6,8,10]和[[1,2,3],[1,2,3]].multiplied_by2==[[2,4,6],[2,4,6]]？(很明显，我编写了multiplied_by函数以区别于*，它似乎连接了数组的多个副本，不幸的是这不是我需要的)。谢谢! 最佳答案 它的长格式等价物是:[1,2,3,4,5].collect{|n|n*2}其实并没有那么复杂。你总是可以使你的multiply_by方法:c

  10. ruby-on-rails - 事件管理员和自定义方法 - 2

    这是我在ActiveAdmin中的自定义页面ActiveAdmin.register_page"Settings"doaction_itemdolink_to('Importprojects','settings/importprojects')endcontentdopara"Text"endcontrollerdodefimportprojectssystem"rakedataspider:import_projects_ninja"para"OK"endendend我想做的是，当我单击“导入项目”按钮时，我想在Controller中执行rake任务。但是我无法访问该方法。可能是什

随机推荐