各append div要素にonchange関数を設定する方法

Question

各append div要素にonchange関数を設定する方法

how to set onchange function to each append div element

出典: link タグ:javascript jquery html jquery-traversing 更新時間: 2019-11-24

ベストアンサー

だから私はあなたのコードにいくつかの変更を加えました -

複数のIDを持つことができないため、IDの代わりにクラスを使用します。
私はそれが好きなので、ここで template literals を使用しました:)
$(document).on('change', '.cam_select' + x, function(e) { - off('change')を使用して動的jqueryリスナーを使用して、重複したリスナーがないことを確認してください。
また、e.targetを使用してクリックされた要素を取得することができます。ここで、eはイベントオブジェクトです。
追加されたマークアップにもう1つのラッパーを追加したことに注意してください - camと closest 関数を使用して、 find メソッドを使用して、動的に挿入されたcamラッパーのいとこを見つけます。

以下のデモを見てください:

 $(document).ready(function() {
  var max_fields = 25;
  var wrapper = $(".camera_men"); 
  var add_button = $(".cam_field_button");
  var x = 0; 
  $(add_button).click(function(e) {
    e.preventDefault();
    if (x < max_fields) {
      x++;
      $(wrapper).append(`
        <div class="cam">
          <div>
            <select name="cam[]" class="form-control cam_select">
              <option email="email" phone="phone" value="צלם 1">צלם 1</option>
              <option email="email2" phone="phone2" value="צלם 2">צלם 2</option>
              <option email="email3" phone="phone3" value="צלם 3">צלם 3</option>
            </select>
	        <a href="#" class="remove_field">הסר צלם ${x}</a>
		  <div>
          <input type="input" name="cam_email[]" class="cm_email">
          <input type="input" name="cam_phone[]" class="cm_phone">
        </div>`);
      $(document).off('change').on('change', '.cam_select', function(e) {
        var email = $(e.target).find('option:selected').attr("email");
        var phone = $(e.target).find('option:selected').attr("phone");
        $(e.target).closest('.cam').find('.cm_email').val(email);
        $(e.target).closest('.cam').find('.cm_phone').val(phone);
      });
    }
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="cam_field_button btn waves-effect waves-light btn-outline-info">הוסף צלם</button>

<div class="camera_men"></div>

kukkuz

同じタグがついた質問を見る

javascript jquery html jquery-traversing

前へ:角度5でスレッドの実行を完了した後にのみ関数を呼び出す方法は?

次へ:dplyr、do()、グループ化変数を失うことなくモデルからパラメータを抽出する

dror shalit · Accepted Answer

私は選択タグで新しいdivを追加するボタンを持っていますが、すべてのオプションにはカスタムattributesがあります。私の問題は、関数がいくつかのdivを作成するときに、関数が応答しない最初のselectタグを変更しようとしているときに作成した最後のdivのみを参照することです。

私はすべてのdivと入力に別のIDを与えようとしましたが、それは動作しません。

  <button type="button" class="cam_field_button btn waves-effect waves-light btn-outline-info" >הוסף צלם</button>


var max_fields = 25; //maximum input boxes allowed
var wrapper = $(".camera_men"); //Fields wrapper
var add_button = $(".cam_field_button"); //Add button ID

var x = 0; //initlal text box count
$(add_button).click(function (e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div>   <br> <select name="cam[]"  id="cam_select'+x+'"  class="form-control" >
' +
            '                                            <option email="email" phone="phone"  value="צלם 1">צלם 1</option>
' +
            '                                            <option email="email2" phone="phone2" value="צלם 2">צלם 2</option>
' +
            '                                            <option email="email3" phone="phone3" value="צלם 3">צלם 3</option>
' +
            '                                        </select><a href="#" class="remove_field">הסר צלם ' + x + '</a><div>  <input type="hidden" name="cam_email[]" id="cm_email' + x + '">
' +
            '                                        <input type="hidden" name="cam_phone[]" id="cm_phone' + x + '">'); //add input box
        $('#cam_select'+x).on('change',function () {


            var email =  $('#cam_select'+x+' option:selected').attr("email");
            var phone =  $('#cam_select'+x+' option:selected').attr("phone");

            $('#cm_email'+x).val(email);
            $('#cm_phone'+x).val(phone);
        })
    }