関数はelseブロックには入っていませんが、jqueryのブロックに戻ると返ります

Question

このコードでは、私の関数はelseブロックに行きません。また、readonlyクラスは編集クリックで追加または削除されません。（ "readonly not working"）編集をクリックすると有効になりますが、readonlyクラスは追加されません。 readonlyクラスもフィールドから削除されていません。理由は何ですか？これで私を助けてください。このコードでは、編集クリック時にフィールドを有効/無効にします。ここでもまた、私は編集をクリックして "編集"テキストを "キャンセル"に変更し、キャンセルをクリックするとテキストを "編集"に変更します。

私のコード：

function myFunc(a, b){ 
    // a check 
    $(a).click(function(){ 
    console.log("enable and disabled check"); 

    if ($(this).parents('.info-details').find(b).hasClass('readonly')){ 
     // disable field 
     console.log("disabled field"); 
     $(this).parents('.info-details').find(b).removeClass('readonly'); 
     $(b).prop("disabled", true); 
    } else { 
     //enable field 
     console.log("enabled field"); 

     $(this).parents('.info-details').find(b).addClass('readonly'); 
     $(b).prop("disabled", false); 
    } 
    }); 
} 

$("#demo").html(myFunc('#edit_data_email','#change_email')); 
$("#demo").html(myFunc('#edit_data_number','#change_mobile_number')); 

elseブロックの内側に行かない機能のための主な理由は何ですか？また、readonlyクラスの仕組みは？

Answer 1

Working fiddle。あなたの編集要素に共通するクラスを与える場合

あなたが関数内でイベントを添付する必要はありませんまず第一に、それが良くなる、その後のように、このクラスを使用して、それらにクリックイベントを添付：

<div class="info-details"> 
    <input id="change_email" /> 
    <button class="edit_data">Edit</button> 
</div> 

<div class="info-details"> 
    <input id="change_mobile_number" /> 
    <button class="edit_data">Edit</button> 
</div> 

これが役に立ちます。

$('.edit_data').click(function() { 
 
    console.log("enable and disabled check"); 
 
    var input = $(this).parents('.info-details').find('input'); 
 

 
    if (input.hasClass('readonly')) { 
 
    console.log("disabled field"); 
 

 
    input.removeClass('readonly'); 
 
    input.prop("disabled", true); 
 
    } else { 
 
    console.log("enabled field"); 
 

 
    input.addClass('readonly'); 
 
    input.prop("disabled", false); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="info-details"> 
 
    <input id="change_email" class='readonly' /> 
 
    <button class="edit_data">Edit</button> 
 
</div> 
 

 
<div class="info-details"> 
 
    <input id="change_mobile_number" class='readonly' /> 
 
    <button class="edit_data">Edit</button> 
 
</div>