如何使用动态创建的对象绑定（）

Question

我在从 prepend 重新绑定动态创建的对象时遇到问题。我已经尝试了很多东西，但我只能解除绑定。请帮忙。

$(document).ready(function(){

$(".newdir").click(function(){
    $(".d-exp").prepend("<div id='new' class='fm-dir'><div class='exp-x'></div><div class='fm-name'><input class='nd-text' type='text'></div></div>");
    $(".newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity",".35");
    $(".newdir, .newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").unbind();      
});

$(".ribbon-menu").on("click", ".newfile", function(){
    $(".d-exp").prepend("<div id='new' class='fm-fn'><div class='exp-x'></div><div class='fm-name'><input class='nf-text' type='text'></div></div>");
    $(".newdir, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity",".35");
    $(".ribbon-menu").unbind(); 
});

$("div.d-exp").on("click", ".exp-x", function(){        
    $(".ribbon-menu").bind();   
    $(".newdir, .newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity","1");    
    $("div#new.fm-dir, div#new.fm-fn").remove();
});

});

现场回答http://jsfiddle.net/dC344/

Answer 1

试试：

$(document).on("click", ".newdir", function(){
    ...
});

Answer 2

当你尝试绑定回来时，你需要指定哪个事件和处理函数

在这种情况下，由于您只想触发点击处理程序一次，因此您可以使用.one() 而不是.on() 和.unbind(), 也可以使用.off() 来取消绑定处理程序。

$(document).ready(function () {

    $(".newdir").click(function () {
        $(".d-exp").prepend("<div id='new' class='fm-dir'><div class='exp-x'></div><div class='fm-name'><input class='nd-text' type='text'></div></div>");
        $(".newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", ".35");
        $(".newdir, .newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").unbind();
    });

    function addRibbonMenuHandler() {
        $(".ribbon-menu").one("click", ".newfile", function () {
            $(".d-exp").prepend("<div id='new' class='fm-fn'><div class='exp-x'></div><div class='fm-name'><input class='nf-text' type='text'></div></div>");
            $(".newdir, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", ".35");
        });
    }

    addRibbonMenuHandler();

    $("div.d-exp").on("click", ".exp-x", function () {
        addRibbonMenuHandler();
        $(".newdir, .newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", "1");
        $("div#new.fm-dir, div#new.fm-fn").remove();
    });

});

Answer 3

在 Jquery 支持 live() 将事件绑定到选择器之前，但在 Jquery 1.7 之后，live 已弃用。现在，您可以使用delegate 或on 将事件绑定到选择器（如Jquery Document）

但是，我通常在创建对象后绑定函数，比如 as

$(document).ready( function(){
   $("#main").click(function(){
      $("#main").append("<div class="new-div">Add new DIV</div>"); // Add new div in main
      $(".new-div").on("click",doBindEvent); // Add click event into new div which function you defined
   });
});

function doBindEvent(){
   // Do anything you want
}

Answer 4

在 Arun P Johnny 的帮助下，我能够使用一些解决了我的问题的逻辑来修改脚本。 jQuery我是个新手，虽然经过研究它可以很好地拼凑起来... XD

$(document).ready(function () {

function addRibbonMenuHandler1() {
    $(".ribbon-menu").on("click", ".newdir", function () {
        $(".d-exp").prepend("<div id='new' class='fm-dir'><div class='exp-x'></div><div class='fm-name'><input class='nd-text' type='text'></div></div>");
        $(".newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", ".35");
        $(".ribbon-menu").unbind();
    });
}

function addRibbonMenuHandler2() {
    $(".ribbon-menu").on("click", ".newfile", function () {
        $(".d-exp").prepend("<div id='new' class='fm-fn'><div class='exp-x'></div><div class='fm-name'><input class='nf-text' type='text'></div></div>");
        $(".newdir, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", ".35");
        $(".ribbon-menu").unbind();
    });
}

addRibbonMenuHandler1(); 
addRibbonMenuHandler2();

$("div.d-exp").on("click", ".exp-x", function () {
    addRibbonMenuHandler1();
    addRibbonMenuHandler2();
    $(".newdir, .newfile, .paste, .copy, .cut, .rename, .delete, .fileinfo, .visit").css("opacity", "1");
    $("div#new.fm-dir, div#new.fm-fn").remove();
    $(".ribbon-menu").bind();
});

});