0

私はこの質問をかなり徹底的に調査しましたが、これまでのところ解決できませんでした。clone(true,true) と関数を live() にすることについては理解していますが、イベントはまだ失敗しています。

これが私の例です - http://jsfiddle.net/vAfMf/2/ - +記号をクリックしてから、複製された要素をクリックしてJeditableをトリガーしてみてください。

関連するコードは次のとおりです。

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
$(".tracklist").sortable({
        placeholder: "track-highlight",
        helper: fixHelper,
        items: "tr",
        start: function(event, ui) {
        i=0;    
        notdragged = false;
        thisthing = $(this);
    },
     stop: function(event, ui) {
         notdragged = true;
     },
    revert: true,
    update: function(event, ui) {
        $(".tracklist .numcol").each(function(){
        $(this).html("");
        });    
        $(".tracklist .numcol").each(function(){
        i++
        $(this).html(i+".  ");
        });
    }

});    

$(".eachtrack").editable("save.php", {
      select : true,
      style   : "display: inline",
      width : "95%",
      cancel    : "<button class=\'cancelthistrack\'>Cancel<\/button>",
      submit    : "<button class=\'savethis\'>Save<\/button>",    
      event : "custom_event"
});

$(".tracklist tr td .eachtrack").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).trigger("custom_event");
        $(this).parent().css("height", "auto");
    }
});
$(".artistcol,.infocol,.titlecol").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {    
        $(this).children(".eachtrack").trigger("custom_event");

    }
});

$(".tracklist tr .btnwrap .addt_outer .addt_inner .addt .pngfix").click(function(){
    var thisrow = $(this).parent().parent().parent().parent().parent();
    var newrow = thisrow.clone(true,true);
    newrow.insertAfter(thisrow);
    return false;
});

基本的に、私はこのポスターとまったく同じ問題を抱えています。Jeditable 要素を複製すると、複製をクリックすると、複製ではなく元の要素が開きます。何をすべきか (イベントの再バインド) に関する質問には答えられますが、それを行う方法についての例は示されておらず、途方に暮れています。私の例は、Sortable が完了したときに Jeditable がトリガーされるのを防ぐためにいくつかの関数を配置しているため、複雑です。

元の要素のイベントをアンバインドしてからクローンに再バインドする方法についての助けをいただければ幸いです。

4

1 に答える 1

0

この質問を ExpertsExchange に投稿したところ、多くのことを学んだ回答が得られました。私のように JQuery を初めて使用する方のために、私と同じように理解が深まることを願って共有します。

更新された例 - http://jsfiddle.net/vAfMf/4/

複製された要素が作成され、バインドされたすべてのイベントがスクラッチされ、エレガントなチェーンで複製に再バインドされます。 

var fixHelper = function(e, ui) {
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
};
$(".tracklist").sortable({
    placeholder: "track-highlight",
    helper: fixHelper,
    items: "tr",
    start: function(event, ui) {
        notdragged = false;
    },
    stop: function(event, ui) {
        notdragged = true;
    },
    revert: true,
    update: function(event, ui) {
        $(".tracklist .numcol").each(function() {
            $(this).html("");
        });
        $(".tracklist .numcol").each(function(index) {
            $(this).html(index + 1 + ".&nbsp;&nbsp;");
        });
    }

});

$(".eachtrack").editable("save.php", {
    select: true,
    style: "display: inline",
    width: "95%",
    cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
    submit: "<button class=\'savethis\'>Save<\/button>",
    event: "custom_event"
});

$(".tracklist tr td .eachtrack").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).trigger("custom_event");
        $(this).parent().css("height", "auto");
    }
});
$(".artistcol,.infocol,.titlecol").live("mousedown", function() {
    notdragged = true;
}).live("mouseup", function() {
    if (notdragged) {
        $(this).children(".eachtrack").trigger("custom_event");
    }
});

$(".tracklist tr .btnwrap .addt_outer .addt_inner .addt .pngfix").click(function() {
    var thisrow = $(this).parents("tr");
    var clone = thisrow.clone(false, false);
    clone.find(".eachtrack").editable("save.php", {
        select: true,
        style: "display: inline",
        width: "95%",
        cancel: "<button class=\'cancelthistrack\'>Cancel<\/button>",
        submit: "<button class=\'savethis\'>Save<\/button>",
        event: "custom_event"
    }).end().find(".tracklist tr td .eachtrack").live("mousedown", function() {
        notdragged = true;
    }).live("mouseup", function() {
        if (notdragged) {
            $(this).trigger("custom_event");
            $(this).parent().css("height", "auto");
        }
    }).end().find(".artistcol,.infocol,.titlecol").live("mousedown", function() {
        notdragged = true;
    }).live("mouseup", function() {
        if (notdragged) {
            $(this).children(".eachtrack").trigger("custom_event");
        }
    });
    thisrow.after(clone);
    $(".tracklist .numcol").each(function(index) {
        $(this).html(index + 1 + ".&nbsp;&nbsp;");
    });
    return false;
});
于 2012-07-11T03:25:21.693 に答える