将触发器与动态内容一起使用

Using trigger with dynamic content

本文关键字：一起 触发器 动态      更新时间：2023-09-26

我正在动态加载包含一系列按钮的内容。我想在按下第一个按钮时触发对第二个按钮的单击，但是触发器事件永远不会触发。

jQuery 

$(document).on('click', '.main-button', function() {
    var self = $(this).attr('class').split(' ')[0];
    $('button.' + self + '.product-id').trigger('click');
});

.HTML

<div class="button-wrap">
    <button class="b-1 main-button"></button>
    <button class="b-1 product-id"></button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button"></button>
    <button class="b-2 product-id"></button>
</div>

实际类名中不需要点，只需要在 css 选择器中。而不是您想要class="b-1 .main-button"：class="b-1 main-button".其他类也是如此。

注意：您还必须为产品按钮设置一个 onclick 处理程序，否则您将看不到点击。

$(document).on('click', '.main-button', function() {
    var self = $(this).attr('class').split(' ')[0];
    $('button.' + self + '.product-id').trigger('click');
});
$(document).on('click', '.product-id', function() {
  var klass = $(this).attr('class');
  alert(klass + " prod button triggered");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrap">
    <button class="b-1 main-button">B1 main</button>
    <button class="b-1 product-id">B1 prod</button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button">B2 main</button>
    <button class="b-2 product-id">B2 prod</button>
</div>

我解释你的问题的方式是：

  1. 当我点击.b-1时，就会点击.b-2。
  2. 从第一个按钮单击与按类名单击第二个按钮相关联，分别表示.b-1.main-button .b-2.main-button和.b-1.product-id .b-2.product-id。

注意：您的代码有一个错误，您在 HTML 中错误地标记了类。因此更改：

<div class="button-wrap">
    <button class="b-1 .main-button"></button>
    <button class="b-1 .product-id"></button>
</div>
<div class="button-wrap">
    <button class="b-2 .main-button"></button>
    <button class="b-2 .product-id"></button>
</div>

分为以下内容：

<div class="button-wrap">
    <button class="b-1 main-button"></button>
    <button class="b-1 product-id"></button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button"></button>
    <button class="b-2 product-id"></button>
</div>

现在进入处理触发器（）的JQuery。这是非常简单的。单击某个按钮时，触发另一个按钮上的单击事件：

$(document).ready(function(){
  // Trigger click when clicking on respective b-1 button
  $(".b-1.main-button").click(function(){
    $(".b-2.main-button").trigger("click");
  });
  $(".b-1.product-id").click(function(){
    $(".b-2.product-id").trigger("click");
  });
  // Show an alert to identify which click was triggered
  $(".b-2.main-button").click(function(){
    alert("Main Button 2");
  });
  $(".b-2.product-id").click(function(){
    alert("Product Button 2");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-wrap">
    <button class="b-1 main-button">Main Button 1</button>
    <button class="b-1 product-id">Product Id 1</button>
</div>
<div class="button-wrap">
    <button class="b-2 main-button">Main Button 2</button>
    <button class="b-2 product-id">Product Id 2</button>
</div>

如果我正确解释了您的问题，那么您应该基于上述解决方案。您有任何问题，请在下面的评论中提出。

相关文章：