为什么 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 比较进行相同的更改。

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

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

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

后重新安装事件处理程序

仅供参考，将来您可以通过找出要添加的诊断代码来帮助自己调试此类情况。在这种情况下，如果您添加以下内容，它可能会告诉您发生了什么：

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

您可能已经看到 class 名称中没有 .，当然如果对象上有多个 class 名称，您会看到也是。

Answer 2

您遇到的问题是，您将 class 名称与上面的点进行比较，并且在您重新添加向上或向下链接后，不分配事件点击。我将链接的功能移至一个函数，因此在添加按钮后，我将功能重新分配给新按钮。向上移动，代码需要一点修复，以获得它应该移动的实际位置。

在 jquery 中获取启动事件的元素，您可以通过“$(this)”访问它

如果我在答案中遗漏了某些内容，请发表评论，我会进行解释。

var moveDownBtnHTML = '<a href="#" class="moveDown"> down </a>',
    moveUpBtnHTML = '<a href="#" class="moveUp"> up </a>',
    template = '<div class="cat"><input type="text" name="cate[]" value="Category __number__"/></div>';

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();
   assignEvent();
}

function assignEvent() {
    $(".cats .moveDown, .cats .moveUp").on('click', function(){
      var that = $(this); //for precaution $(this) have the object that started the event
      if( that.attr("class") == "moveDown")
      {
         var i = $(".cat").index(that.parent());
         contentToMove = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";
         $(".cat").eq(i).remove();
          $(".cat").eq(i).after(contentToMove);
   
         reloadBtns();
      }
      else if(that.attr("class") == "moveUp")
      {
         var i = $(".cat").index(that.parent());
         contentToMove = "<div class='cat'>"+$(".cat").eq(i).html()+"</div>";
         $(".cat").eq(i).remove();
         $(".cat").eq(i-1).before(contentToMove);
     
         reloadBtns();
      }
   });
}

$( document ).ready(function() {
   assignEvent();
    
   $('.addnew').click(function(e) {
       e.preventDefault();
       howmany = $('.cats').children().length;
       newcat = template.replace(/__number__/, howmany+1);
       $('.cats').append(newcat);
       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>
<a href="#" class="addnew">Add new</a>

Answer 3

我相信如果您向按钮添加 mover class 并简单地隐藏 up/down 按钮 (first/last) 而不是用 remove/add 击中 DOM。

标记：

<h2>Categories editor</h2>
<div class="cats">
    <div class="cat">
        <input type="text" name="cate[]" value="Category 1" readonly /><a href="#" class="moveDown mover"> down </a><a href="#" class="moveUp mover"> up </a>
    </div>
    <div class="cat">
        <input type="text" name="cate[]" value="Category 2" readonly /><a href="#" class="moveDown mover"> down </a><a href="#" class="moveUp mover"> up </a>

    </div>
    <div class="cat">
        <input type="text" name="cate[]" value="Category 3" readonly/><a href="#" class="moveDown mover"> down </a><a href="#" class="moveUp mover"> up </a>
    </div>
    <div class="cat">
        <input type="text" name="cate[]" value="Category 4" readonly/><a href="#" class="moveDown mover"> down </a><a href="#" class="moveUp mover"> up </a>
    </div>
</div>

代码：

function showButtons() {
    $('.mover').show();
    $('.mover.moveUp').first().hide();
    $('.mover.moveDown').last().hide();
}
$(".cats").on('click', '.mover', function (evt) {
    var moveup = $(this).hasClass("moveUp") ? true : false;
    var par = $(this).parents('div.cat');
    var n = par.next();
    var p = par.prev();
    if (moveup) {
        par.insertBefore(p);
    } else {
        par.insertAfter(n);
    }
    showButtons();
});
showButtons();

在这里测试一下：http://jsfiddle.net/MarkSchultheiss/xxmb41jL/

为什么 jQuery 事件“.on”没有任何事件参数

Why doesn't the jQuery event ".on" have any event argument

html

css

jquery

events

undefined