Блог

Во-первых, я хотел бы поблагодарить всех, кто читает мой пост и пытается помочь или, по крайней мере, находит время, чтобы прочитать мой пост. Я создаю средство выбора выбора, которое покажет выбранные параметры ниже выбора при запуске с помощью ajax. Но моя проблема в том, что после выполнения сценария ajax и показа divs, x для удаления работает только для последней опции в div. Поэтому я попытался поискать, нет ли подобной проблемы, но нашел только 1 недавно добавленный div. Событие щелчка работает только для последнего добавленного div

вот мой html

во — первых, это несколько строк в таблице:

 <td>
                                <button type="button" class="m-0 p-0 action_link edit_package_spots_button" id="<?php echo $package->id . "-id";?>" data-toggle="modal" data-target="#spotModal" data-id="<?php echo $package->id;?>">
                                    <span><i class="fa fa-archway color-muted m-r-5"></i></span>
                                </button>
                            </td>
 

И ниже приведены в модальном

 <div class="modal-body" id="spots_modal_body">
                            
                            <div class="row align-items-center m-t-20 package_type_div">
                                <div class="col-3">
                                    <label class="form-check-label" for="package_spots_title">Package Spots <span style="color:red;">*</span></label>
                                </div>
                                
                                <div class="col-9">
                                    <select class="form-control select_list package_spots_title" name="package_spots_id" >
                                        <!-- These countries we get from database using the TourismType class -->
                                        
                                        <option value="" selected="true" disabled="disabled">Select Package Spots</option>
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                        
                                    </select>
                                    
                                </div>
                            </div>
 

а ajax-это просто дивы:

 <div class='added_package_spot' id='package_spot1'>Chosen option 1<i class='fas fa-close package_spot_remove'></i></div>
<div class='added_package_spot' id='package_spot2'>Chosen option 2<i class='fas fa-close package_spot_remove'></i></div>
<div class='added_package_spot' id='package_spot3'>Chosen option 3<i class='fas fa-close package_spot_remove'></i></div>
 

Мой jquery (для jquery я попробовал каждый() в качестве последнего варианта, но перед тем, как я попробовал нажать без него, и это не сработало):

 $('.edit_package_spots_button').on('click', function(){
        
        var id = $(this).attr("data-id");
        
        var url = "ajax_calls/get_package_spots.php";
       
        $.ajax({
            url: url, 
            method: "POST",
            data: {
                package_id: id
            },
            success: function(data){
                console.log(data);
                var dataArray = data.split("-/-");
                var packageSpotsId = dataArray[0];
                var html = dataArray[1];
                
                $(".chosen_package_spot").append(html);

                    $('.package_spot_remove').each(function(){
                        $('.chosen_package_spot').on('click', '.package_spot_remove', function() {
                            //console.log("#package_spot" id);
                            $("#package_spot" id).remove();
                            if(hiddenValue != "") {
                                if(hiddenValue.includes(",") === true) {
                                    hiddenValue = hiddenValue.replace("," id, "");
                                } else {
                                    hiddenValue = hiddenValue.replace(id, "");
                                }
                                $("#package_spot_hidden").val(hiddenValue);
                            }
                            //console.log("hidden 2: " hiddenValue);
                        });
                    });

               
                
            }
        }); // end of $.ajax()

    });
 

Переместите обработчик кликов за пределы функции ajax. Мы можем делегировать его document , чтобы вы могли добавлять и удалять .package_spot_remove его в течение всего дня, и он все равно будет работать. Мы можем найти идентификатор по относительному пути: $(this).closest(".added_package_spot").attr('id') — и удалить удаленный идентификатор из скрытого значения следующим образом: $("#package_spot_hidden").val().split(",").filter(f => f.trim() != myid).join(",")

 $(document).on('click', '.package_spot_remove', function() {
  let myid = $(this).closest(".added_package_spot").attr('id');
  $(this).closest(".added_package_spot").remove();
  let hv = $("#package_spot_hidden").val().split(",").filter(f => f.trim() != myid).join(",");
  $("#package_spot_hidden").val(hv)
});

$('.edit_package_spots_button').on('click', function() {
  var id = $(this).attr("data-id");
  var url = "ajax_calls/get_package_spots.php";

  $.ajax({
    url: url,
    method: "POST",
    data: {
      package_id: id
    },
    success: function(data) {
      console.log(data);
      var dataArray = data.split("-/-");
      var packageSpotsId = dataArray[0];
      var html = dataArray[1];
      $(".chosen_package_spot").append(html);
    }
  }); // end of $.ajax()

});