当前位置：文江博客话题详情

如何使 jquery 绑定事件工作

发布于 2024-08-27 21:45:34 字数 242 浏览 8 评论 0原文

由于某种原因，我的绑定事件不起作用。您可以在这里看到我的代码： http://dl.dropbox.com/u /145581/MyPage/default.html

单击“添加小工具”或“删除小工具”按钮应该会触发警报，但没有任何反应。

有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

戏蝶舞 2024-09-03 21:45:34

您对 bind 的调用是在 $(document).ready( ) 处理程序之外进行的，因此您的元素还不存在。将它们移至 $(document).ready() 或使用 jQuery 的 live(...)。

回复收藏 0 原文

仅此而已 2024-09-03 21:45:34

首先，确保将 bind() 方法移至 $(document).ready() 事件内。由于它们是在 DOM 准备好之前（即在这些 DOM 元素存在之前）调用的，因此无法将事件绑定到它们。

此外，直到 jQuery 1.4 才支持将对象传递给 bind()。（您可以使用我下面的代码，或者升级到 1.4 以按原样使用您的 bind() 方法。（您仍然需要将它们移至 ready()< /代码> 事件。

$(document).ready(function(){
    // enable sortable on all columns
    // this will add drag-and-drop functionality as well
    $("#mypage_column1").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column2"]
    });

    $("#mypage_column2").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column1"]
    });

    $("img.btn_delete").bind('click', function() {
        alert("Removing this gadget");
      });

    $("img.mypage_add_gadget").bind('click', function() {
        alert("Adding a new gadget");
      });
});

First, make sure you move your bind() methods inside the $(document).ready() event. Since they are being called before the DOM is ready (namely before those DOM elements even exist) there is no way for an event to be bound to them.

Also, passing in objects to bind() isn't supported until jQuery 1.4. (You can use the code I have below, or upgrade to 1.4 to use your bind() methods as is. (you'll still need to move them to inside the ready() event.

$(document).ready(function(){
    // enable sortable on all columns
    // this will add drag-and-drop functionality as well
    $("#mypage_column1").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column2"]
    });

    $("#mypage_column2").sortable({
        items: '.gadget', // the type of element to drag
        handle: 'h2', // the element that should start the drag event
        opacity: 0.9, // opacity of the element while draging
        connectWith: ["#mypage_column1"]
    });

    $("img.btn_delete").bind('click', function() {
        alert("Removing this gadget");
      });

    $("img.mypage_add_gadget").bind('click', function() {
        alert("Adding a new gadget");
      });
});

回复收藏 0 原文

~没有更多了~