以下代码无效:
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 事件。为什么它不起作用?
怎样做最简单?
最佳答案
我看到几个问题:
改变这个:
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"));
然后您可能会看到类名中没有 .
,当然如果对象上有多个类名,您也会看到这一点。
关于jquery - 为什么 jQuery 事件 ".on"没有任何事件参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32037114/