私フィドル外部関数

Question

にこのイベントを渡す..

を、入力フィールドを編集した後

http://jsfiddle.net/TrySpace/QZMP6/17/

を各要素に対してHTMLの更新が、私はクリックイベントを復元/再有効化したいです私はclickイベントを外部関数にしようとしましたが、正しく動作する/関数と通信するようには思えません...

イベントを渡す方法がわかりません機能...

あなたはフィドルで見ることができるように、私がやろう：

$(this).on("click"); 

をしかし、それは動作しませんので、コースオフ、それは何も定義されていないので、私は再呼び出しする/再割り当てを持っています機能全体。

Answer 1

この機能は変数として定義できます。

http://jsfiddle.net/QZMP6/25/

var clicky = function() 
{ 
    var currentClickedDIV = this.id; 
     $('#output').append("Clicked: "+currentClickedDIV +"<BR>"); 
    var currentClickedDIVContent = $(this).html(); 
     $('#output').append("HTML: "+currentClickedDIVContent +"<BR>"); 

    //Make current html content editable 
    $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>"); 

    //prevent more triggers within element  
    $(this).off("click").on("click", function (e) { 
     e.stopPropagation(); 
    }); 
    //Focus cursor on input 
    $("#currentInput").focus(); 

    var $that = $(this); 
    //On blur replace with plain html, also reenable click? 
    $("#currentInput").blur(function(){ 
     var currInput = $("#currentInput").val(); 
     $("#"+currentClickedDIV).html(currInput); 
     $('#output').append("New HTML: "+ currInput +"<BR>"); 
     $that.on("click", clicky); 
    }); 


    return false; 
} 

$('.cuboid').on('click', clicky); 

Answer 2

デモ：これに

//Make current html content editable 
    $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>"); 

：あなたはこれを変更した場合http://jsfiddle.net/QZMP6/23/

//Make current html content editable 
    $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>").children().on('blur', function() { 
     $('#' + currentClickedDIV).off('click').on('click', external_click); 
    }); 

イベントハンドラは、入力要素の後に再接続されますが、blur編です。また、あなたのコードをexternal_clickという名前の外部関数に移動しました。上記のデモのコードは次のとおりです。

function external_click() { 
     var currentClickedDIV = this.id; 
      $('#output').append("Clicked: "+currentClickedDIV +"<BR>"); 
     var currentClickedDIVContent = $(this).html(); 
      $('#output').append("HTML: "+currentClickedDIVContent +"<BR>"); 

     //Make current html content editable 
     $("#"+currentClickedDIV).html("<INPUT id='currentInput' value='"+currentClickedDIVContent+"'></INPUT>").children().on('blur', function() { 
      $('#' + currentClickedDIV).off('click').on('click', external_click); 
     }); 

     //Focus cursor on input 
     $("#currentInput").focus(); 

     //On blur replace with plain html, also reenable click? 
     $("#currentInput").blur(function(){ 
      var currInput = $("#currentInput").val(); 
      $("#"+currentClickedDIV).html(currInput); 
      $('#output').append("New HTML: "+ currInput +"<BR>"); 
     }); 


     //prevent more triggers within element 
     console.log($(this)); 
     $(this).off("click").on("click", function (e) { 
      e.stopPropagation(); 
     }); 

     return false; 
    } 
$('.cuboid').on('click', external_click);