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中所示）

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

$(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();
});

});

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

4 个答案: