jqueryは相互関数のパラメータを渡します

Question

私はJqueryでdivをtextareaに変更し、ぼかしでdivに変更する2つの関数を持っています。 divのidを保存し、それをネストされた関数で使用する必要があります。これら2つの機能の間でidをどうやって渡すことができますか？ これはずっとより良いアプローチは、タイプ間の要素を切り替えるに委任イベントハンドラを使用することであろうイベント

function divClicked(id) { 
    console.log("click"); 
    var divHtml = $(this).html(); 
    var editableText = $("<textarea />"); 
    editableText.val(divHtml); 
    $(this).replaceWith(editableText); 
    editableText.focus(); 
    // setup the blur event for this new textarea 
    var iden = $(this).attr("id"); 
    editableText.blur(id, editableTextBlurred); 
} 

function editableTextBlurred(id) { 
    console.log("blur"); 
    var html = $(this).val(); 
    var viewableText = $("<div>"); 
    viewableText.html(html); 
    $(this).replaceWith(viewableText); 
    var descr = viewableText.html(); 
    // setup the click event for this new div 
    cool_function(id, descr); 
    $(viewableText).click(id, divClicked); 
} 

Answer 1

として目idを検出した私のコード、このようなものです：

$(document).on('click', 'div.switch', function() { 
 
    var $textarea = $('<textarea />', { 
 
    class: 'switch', 
 
    html: $(this).html(), 
 
    id: this.id 
 
    }); 
 
    $(this).replaceWith($textarea); 
 
    $textarea.focus(); 
 
}).on('blur', 'textarea.switch', function() { 
 
    var $div = $('<div />', { 
 
    class: 'switch', 
 
    html: this.value, 
 
    id: this.id 
 
    }); 
 
    $(this).replaceWith($div); 
 
    cool_function(this.id, this.value); 
 
}); 
 

 
function cool_function(id, html) { 
 
    // your logic here... 
 
    console.log(id, html); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="switch" id="foo">Foo <strong>bar</strong></div> 
 
<div class="switch" id="foo">Fizz buzz</div>

この方法の利点は、任意のインスタンスに対して機能することであるdiv.switchはJSの修正なしでHTML内にあり、要素がスワップされるたびに追加/削除するのではなく、2つのイベントハンドラだけです。

contenteditable divを使用することもできますが、ページがどのように構成されているか、またサーバーがデータを受信するように設定されているかによって異なります。