jquery - 为什么 jQuery 事件 ".on"没有任何事件参数

Question

以下代码无效:

var moveDownBtnHTML = '<a href="#" class="moveDown"> down </a>',
    moveUpBtnHTML = '<a href="#" class="moveUp"> up </a>';

function reloadBtns()
{
   $(".cats .cat .moveUp").add(".cats .cat .moveDown").remove();
   $(".cats .cat").children("input").after(moveDownBtnHTML + moveUpBtnHTML);
   $(".cat:first-child .moveUp").add(".cat:last-child .moveDown").remove();
}

$( document ).ready(function() {
   $(".cats").on('click', '.moveDown .moveUp', function(evt){
      if(evt.target.attr("class") == ".moveDown")
      {
         var i = $(".cat").index(evt.target.parent()),
             ctm = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";
                    
         $(".cat").eq(i).remove();
         $(".cat").eq(i).after(contentToMove);
   
          reloadBtns();
      }
      else if(evt.target.attr("class") == ".moveUp")
      {
         var i = $(".cat").index(evt.target.parent()),
             ctm = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";
                            
         $(".cat").eq(i).remove();
                    
         $(".cat").eq(i - 1).after(contentToMove);
                    
         reloadBtns();
      }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h2>Categories editor</h2>
<div class="cats">
  <div class="cat"><input type="text" name="cate[]" value="Category 1" readonly/><a href="#" class="moveDown"> down </a></div>
  <div class="cat"><input type="text" name="cate[]" value="Category 2" readonly/><a href="#" class="moveDown"> down </a><a href="#" class="moveUp"> up </a></div>
  <div class="cat"><input type="text" name="cate[]" value="Category 3" readonly/><a href="#" class="moveUp"> up </a></div>
</div>

一般是做一个多类数据库的形式，里面有数据，但是不是很重要...

我不知道如何在参数中传递事件数据信息以了解哪个“按钮”激活了事件以了解我是否需要提高类别或是否需要降低类别。我测试了很多方法，但我最终决定回复你。我刚刚用那个表格浪费了 2 天时间!

我在这个论坛上看到 [selector.on(trigger, selector, function(event){}] 中的事件参数将包含一个 jQuery 事件。为什么它不起作用？

怎样做最简单？

Answer 1

我看到几个问题:

改变这个:

if(evt.target.attr("class") == ".moveDown") {

为此:

if ($(evt.target).hasClass("moveDown")) {

对您的 moveUp 比较进行相同的更改。

如果对象上只有一个类并且您从比较字符串中删除了 .，那么您的原始代码行可能会起作用。请记住，实际的类名不包含 .。这是您在构建 CSS 选择器时添加的内容。但是与类属性相比只是裸字符串，而不是选择器字符串。

但是，最好只使用 .hasClass()(如我建议的代码所示)，而不必担心对象上是否有多个类名。

然后，其次，您似乎完全重新生成了 HTML，但没有重新安装事件处理程序。当使用直接附加到 DOM 元素的事件处理程序时，如果您替换这些 DOM 元素，它们将没有任何事件处理程序。这里更好的解决方案可能是根本不替换您的 HTML，而是根据需要修改它。但是，如果您要替换 .cat HTML，则必须在创建新 HTML 后重新安装事件处理程序。

---

仅供引用，在未来，您可以通过确定要添加的诊断代码来帮助自己调试此类情况。在这种情况下，如果您添加以下内容，它可能会告诉您发生了什么:

console.log(evt.target.attr("class"));

然后您可能会看到类名中没有 .，当然如果对象上有多个类名，您也会看到这一点。