У меня есть событие щелчка, которое позволяет тегам привязки работать только при двойном нажатии. Это прекрасно работает, когда тег привязки находится в исходном дереве, но после копирования файла в дереве в другое дерево событие не запускается и заставляет теги привязки работать одним щелчком мыши. Кто-нибудь знает причину этого? Тег привязки точно такой же в новом дереве. У меня есть мой код ниже:

$('.tree-link').click(function(){
    return false;
}).dblclick(function() {
    window.location = this.href;
    return false;
});

Исходный тег привязки перед копированием (событие пожара):

<a class="jstree-anchor  tree-link" href="#settings.html"><i class="jstree-icon jstree-themeicon fa fa-briefcase icon-state-success  jstree-themeicon-custom"></i>test</a>

Скопированный тег привязки в новом дереве (событие не запускается):

<a class="jstree-anchor  tree-link" href="#settings.html"><i class="jstree-icon jstree-themeicon fa fa-briefcase icon-state-success  jstree-themeicon-custom"></i>test</a>

Два тега привязки абсолютно одинаковы, но я не знаю, почему другой не запускает событие click ... У кого-нибудь есть идеи, почему?

0
NiallMitch14 15 Дек 2015 в 18:57

4 ответа

Лучший ответ

Я отказался от использования привязки и просто использовал событие двойного щелчка при использовании window.location.href для изменения страницы. В настоящее время это прекрасно работает для меня. Вот код, если кому-то интересно:

$('#tree').on("dblclick", function (event) {
var li = $(event.target).closest("li");
var node = $('#tree').jstree().get_node(li.attr('id'));
if(node.icon.indexOf("briefcase") != -1){
    window.location.href = "#settings.html";
}
0
NiallMitch14 16 Дек 2015 в 10:27

Это происходит потому, что переход от дерева к дереву, вероятно, удаляет узел из DOM и вставляет его снова.

Посмотри на это:

$('.myClass').click(function() {
  return false;
}).dblclick(function() {
  window.location = this.href;
});

$('.move').click(function() {
  var anchor = $('.myClass');
  anchor.remove();
  document.body.appendChild(anchor.get(0));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="http://example.com"/ class="myClass">link</a>
<button class="move">Move link</button>

Решением этой проблемы является использование метода .on из jQuery, который присоединяет события ко всем элементам, которые будут добавлены в DOM в будущем.

0
Rafał Łużyński 15 Дек 2015 в 16:17

Попробуйте вот так:

$('body').on('click', '.tree-link', function(event){
        event.preventDefault();
        console.log('single-click');
}).on('dblclick', function() {
        event.preventDefault();
        console.log('double-click');
});

Поиграйте здесь: http://jsfiddle.net/vxm4quzz/1/

Также вам может быть интересно прочитать это: jQuery eventDelegation

0
caramba 15 Дек 2015 в 21:42

Вы проверили, доступен ли this.href в области действия вашей функции? скорее всего, вы ссылаетесь на jquery вместо самого объекта

Пытаться:

var self = this;
$('.myClass').click(function(){
    return false;
}).dblclick(function() {
    window.location = this.href;
    return false;
});
0
user1375895 15 Дек 2015 в 16:14