jQueryとボタンを使用して編集可能なフィールドとクラス名を切り替える（jQuery、HTML、PHP）

Question

編集可能なフィールドを持つユーザープロファイルを作成しようとしています。

私のアプローチは、「編集」というボタンをクリックすることでフィールドを編集できるようにすることです。クリックで、jQueryのは

• 変更フィールドのスタイリングは
• 変更ボタンのテキストが変更に
• ボタンクラスを "「保存」するために編集可能であることを許可するフィールドを
• ユーザの注意を引くためにすべきです、保存 『をクリックする」というボタンがすると

をクリックし、その後に新しいjQueryの機能を呼び出すために』 jQueryの必要があり、保存

• 編集不可能なフィールドを作る
• アップデートをスタイリングの削除DB AJAXは戻って「編集」
へ
• 変更クラスバック「編集」
• 変更ボタンのテキストに（まだ符号化されない）を介して

私の問題は、「編集」jQueryコードブロックが実行され、目的の結果が生成されることですが、「保存」コードブロックはクリックでは機能しません。

開発ツールにはエラーがありません。

https://jsfiddle.net/848yqkvz/2/

HTML

<div class="row text-center company">Company Name</div> 
<button class="btn btn-default edit">Edit</button> 

"編集ボタン" JS

$(document).ready(function() { 
    $('.edit').click(function() { 
    $('.company').attr('contenteditable', 'true').css({ 
     'border': 'black solid 1px', 
     'outline': 'none' 
    }).focus(); 
    $(this).text("Save").addClass('save').removeClass('edit'); 
    }); 
}); 

"ボタンを救う" JS

$(document).ready(function() { 
    $('.save').click(function() { 
    alert("working!"); 
    $('.company').attr('contenteditable', 'false').css({ 
     'border': 'none', 
     'outline': 'none' 
    }); 
    $(this).text("Edit").addClass('edit').removeClass('save'); 
    }); 
}); 

Answer 1

editとsaveの2つの別々のイベントを定義する代わりに、1つのイベントに結合してクラスで再生することができます。あなたのコードはsaveクラスを追加しています。それを条件として使用して、入力フィールドを変更し、それに応じて保存することができます。

$('button').on('click', function() { 
 
    if ($(this).hasClass('save')) { 
 
    alert("Saved!!!"); 
 
    $(this).text("Edit").removeClass('save'); 
 
    $('.company').attr('contenteditable', 'false').css({ 
 
     'border': 'none', 
 
     'outline': 'none' 
 
    }); 
 
    } else { 
 
    $(this).text("Save").addClass('save'); 
 
    $('.company').attr('contenteditable', 'true').css({ 
 
     'border': 'black solid 1px', 
 
     'outline': 'none' 
 
    }).focus(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row text-center company">Company Name</div> 
 
<button class="btn btn-default edit">Edit</button>