jQuery .on ('click') не работает с jQuery UI draggable

Question

У меня есть вопрос относительно jQuery. Я действительно новичок в jQuery или даже в javascript, поэтому, пожалуйста, несите меня.

Я использую jQuery UI, перетаскиваемый на некоторых div в моем приложении. Проблема в том, что jQuery .on ('click'), похоже, не работает с этими div. Я попытался использовать .click(), и он работает. Тем не менее, divs будут создаваться динамически и, основываясь на том, что я узнал, лучше всего использовать .on(), когда мы хотим использовать динамически созданные элементы. Ниже мой HTML фрагмент:

<div class="book-page"> 
    <div class="draggable-text"> 
     <p>First text</p> 
    </div> 
    <div class="draggable-text"> 
     <p>Second text</p> 
    </div> 
</div> 

А вот это JQuery фрагмент:

$('div.draggable-text').draggable({ 
    cursor: 'move', 
    delay: 200, 
    containment: 'parent' 
}).resizable().selectable(); 

// This one doesn't work 
$('div.book-page').on('click', 'div.book-page > div.draggable-text', function() { 
    alert('clicked!'); 
    // some more coding here... 
}); 

// This one works 
/*$('div.book-page > div.draggable-text').click(function() { 
    alert('clicked!'); 
    // some more coding here... 
});*/ 

И, наконец, вот a link to a jsfiddle я создал. Я очень ценю любую помощь.

Спасибо! И извините за плохой английский.

Answer 1

Похоже, что у вас есть некоторые синтаксические ошибки со вторым.

Попробуйте это:

$('div.draggable-text').on('click', function() { 
    alert('clicked!'); 
    // some more coding here... 
}); 

Читать синтаксис JQuery 'на' события, чтобы лучше понять, что аргументы идут в http://api.jquery.com/on/

Ура.!

Answer 2

Jquery Синтаксис incorect попробуйте следующее:

$('div.draggable-text').on('click', function() { 
alert('clicked......'); 
// some coding here... 
}); 

Проверить здесь: http://jsfiddle.net/jS8sK/2/

Answer 3

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

$('div.draggable-text').die('click').live('click', function() { 
alert('clicked......'); 

Answer 4

Если вы хотите связать событие click с динамически созданным перетаскиваемым элементом, ваша первая идея была почти правильной.

Вот фиксированный код: http://jsfiddle.net/G75qs/3/

$('.draggable-text').draggable({ 
    cursor: 'move', 
    delay: 200, 
    containment: 'parent' 
}).resizable().selectable(); 

//Bind click event for all element with class .draggable-text including 
//elements dynamically created 
$('.book-page').on('click', '.draggable-text', function() { 
    alert('clicked!'); 
    // some more coding here... 
}); 

Answer 5

Попробуйте это:

$('div.draggable-text').click(function(e){ 
e.preventDefault(); 
    alert('test'); 
});