Jquery .on ("click") для диапазона не работает в Firefox, но работает в Firefox Dev - PullRequest
Новая
       1

Jquery .on ("click") для диапазона не работает в Firefox, но работает в Firefox Dev

0 голосов
/ 15 февраля 2019

Итак, у меня есть интересный случай, когда у меня есть таблица с вариантами нажатия кнопки для удаления строки. 

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

 delete_icon.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>
var remove_button = $("<button>").addClass("myClasses").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

delete_icon.on("click", {row:row_each}, function(event) {
      alert("clicked");
})

, но, похоже, это не работает в обычном Firefox.Фактически, когда я наводю курсор на кнопку, курсор также не является указателем.

Однако, когда я переключился на Firefox Developer Edition, у меня не было проблем с этим вообще.Есть ли другое поведение между Firefox Dev и обычным старым Firefox?

Когда я проверяю элемент в обычный Firefox, я вижу, что к нему прикреплено событие (мое оповещение ()), но здесь оно не вызывается

Буду признателен за любые идеи!Спасибо!

Примечание. Это прекрасно работает во всех других браузерах (Chrome, IE и т. Д.).Мой devFF работает на v66, а мой обычный FF на v65

1 Ответ

0 голосов
/ 15 февраля 2019

Вы подключаете обработчик щелчка к <span>, а не к <button>.В промежутке нет текста, поэтому щелкнуть по нему невозможно.

Ваш пример работает в Chrome, если я добавлю что-то в промежуток: 

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses").text("X");
remove_button.append(delete_icon);

 delete_icon.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

Или вместо этого прикрепите обработчик к кнопке. 

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses");
remove_button.append(delete_icon);

 remove_button.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>

Но чтобы это работало в Firefox 65, мне нужно сделать и .Когда в промежутке ничего нет, я даже не вижу кнопку в FF.

Полагаю, разработчики Mozilla считают это ошибкой, и они исправили ее в новой версии. 

var each_row = $("<div>").addClass("multiple-group-fields");
var remove_button = $("<button>").addClass("classes").appendTo(each_row);
var delete_icon = $("<span>").addClass("moreClasses").text("X");
remove_button.append(delete_icon);

 remove_button.on("click",{row:each_row}, function(event) {
    alert("clicked");
})

$("body").append(each_row);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <p>Example</p>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...