jQuery .on('click')不适用于可拖动的jQuery UI [英] jQuery .on('click') does not work with jQuery UI draggable

问题描述

我对jQuery有疑问.我真的对jQuery甚至是javascript都是陌生的，所以请忍受我.

I have a question regarding jQuery. I am really new with jQuery, or even javascript for that matter, so please bear with me.

我在我的应用程序中的某些div上使用了可拖动的jQuery UI.问题是，jQuery .on('click')似乎不适用于这些div.我确实尝试使用.click()，它确实起作用.但是，div将动态创建，根据我所学到的知识，当我们要使用动态创建的元素时，最好使用.on().以下是我的HTML代码段:

I am using jQuery UI draggable on some divs in my app. The problem is, jQuery .on('click') doesn't seem to work with these divs. I did try to use .click() and it does work. However, the divs are going to be created dynamically, and based on what I've learned it is best to use .on() when we want to use dynamically created elements. Below is my HTML snippet:

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

这是jQuery片段:

And here is the jQuery snippet:

$('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...
});*/

最后，这是我创建的指向jsfiddle的链接.我真的很感谢任何帮助.

And lastly, here is a link to a jsfiddle I've created. I really appreciate any kind of help.

谢谢！对不起，英语不好.

Thanks! And sorry for the bad English.

推荐答案

第二个语法似乎有语法错误.

Looks like you have some syntax errors with your second one.

尝试一下:

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

阅读jQuery'on'事件的语法，以更好地了解传入的参数. http://api.jquery.com/on/

Read the syntax for the jQuery 'on' event to understand better what arguments go in. http://api.jquery.com/on/

干杯！

这篇关于jQuery .on('click')不适用于可拖动的jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！