时间戳

首页 > 解决方案 > jquery 函数甚至可以从不同的按钮一起执行

javascript - jquery 函数甚至可以从不同的按钮一起执行

问题描述

我有 2 个按钮，每次执行其中一个按钮时，即使它们执行不同的操作，最终也会一个接一个地同时执行这两个功能。我找不到一种方法可以在不弄乱代码的情况下将两个功能分开在两个不同的按钮中。我使用一个名为 key 的变量在操作中使用。

我尝试将它们包装在一个 div 中并给它们一个特定的类名，但我没有成功使它工作 函数在最后

var storage = firebase.storage();
var database = firebase.database();
database.ref('declaration').once('value', function(snapshot) {
  if (snapshot.exists()) {
    var content = '';
    snapshot.forEach(function(data) {
      var key = data.key;
      var val = data.val();
      var ker = key + "2";
      var k = key + "1";
      $('#ex-table').append("<tr id='" + key + "'><td>" +
        val.date +
        "</td><td>" +
        val.firstName +
        "</td><td>" +
        val.lastName +
        "</td><td>" +
        val.cin.replace('@gmail.com', '') +
        "</td><td>" +
        val.numTel +
        "</td><td>" +
        "<a href=https://www.google.tn/maps/place/" + val.position + "> My Position </a>" +
        "</td><td>" +
        "<img id='" + k + "' height=200 width=200/>" +
        "</td><td>" +
        val.etat +
        "</td><td><button id='" + key + "'>enoyer equipe</button><button id='" + ker + "'>Delete</button></td></tr>");

      // Fonction de changement d'etat

      var storageRef = storage.ref(val.photo);
      storageRef.getDownloadURL().then(function(url) {
        // Or inserted into an <img> element:
        document.getElementById(k).src = url;
      }).catch(function(error) {
        // Handle any errors
      });

      $(document).on('click', "#" + key, function() {
        var database = firebase.database().ref('declaration')
        var newetat = database.child(key);
        newetat.update({
          "etat": "team sent"
        });
      });
      $(document).on('click', "#" + ker, function() {
        firebase.database().ref('declaration/' + key).remove();
      });
    });
  }
});
<table class="table" id="ex-table">
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Nom</th>
      <th scope="col">Prénom</th>
      <th scope="col">N° CIN</th>
      <th scope="col">Tel</th>
      <th scope="col">Position</th>
      <th scope="col">Photo d'accident</th>
      <th scope="col">Etat</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

标签： javascriptjqueryhtmlfunction

解决方案

两个问题：

1）您重用了id属性值key（id属性在 HTML 文档中必须是唯一的）

2）您已将单击事件绑定到 idkey和ker作为子元素的<tr>元素到也绑定了单击事件的元素（具有相同的id）。

为了防止事件在<tr>元素上“冒泡”，将事件引用添加到处理程序并添加：

event.stopPropagation();

处理程序内部。

或者

在id每个<tr>.

推荐阅读