событие клика для динамического контента, не запускаемого при первом клике

Question

Я пытаюсь реализовать поиск по ключевым словам на моем сайте. И результат поиска содержит якорь, чтобы получить подробный вид. И это показывает всплывающее окно в событии щелчка якоря. Но моя проблема в том, что это всплывающее окно не отображается при первом нажатии. Если я снова нажму на ссылку, появится всплывающее окно. Я вставляю снимок экрана с окном поиска и сценарием. Кто-нибудь, пожалуйста, помогите мне исправить эту проблему.

Сценарий:

function showAdvancedSearch(value) {

  var searchResults = '<div class="scrollbar-inner">';
  var status = "";
  var color = "";
  $.ajax({
    url: base_url + 'Panel/quickSearch',
    type: 'POST',
    data: {
      q: value
    },
    async: false,
    success: function(result) {
      result = $.parseJSON(result);

      for (var i = 0; i < result.length; i++) {

        if (result[i]['TargetedUserHolded'] == 'Y') {
          status = 'Hold';
          color = 'yellow';
        } else if (result[i]['MeetingExecuted'] == 'Y') {
          status = 'Completed';
          color = 'green';
        } else if (result[i]['MeetingCancelled'] == 'Y') {
          status = 'Cancelled';
          color = 'blue';
        } else {
          color = 'blue';
        }
        var d = new Date(result[i]['MeetingStartDateTime']);
        var amOrPm = (d.getHours() < 12) ? "AM" : "PM";
        var hour = (d.getHours() < 12) ? d.getHours() : d.getHours() - 12;
        var minutes = d.getMinutes();
        var month = d.getMonth() + 1;
        var day = d.getDate();
        var year = d.getFullYear();

        searchResults += '<div class="board-details ' + color + '">' +
          '<div class="board-head">' +
          result[i]['FirstName'] + ' Scheduled Meeting <em>(' + status + ')</em>' +
          '</div>' +
          '<p>' + result[i]['MeetingNote'] + '.</p>' +
          '<div class="board-flex">' +
          '<a href="javascript:void(0)" class="view-details"  data-meeting-id="' + result[i]['MeetingID'] + '">view details</a>' +
          '<span class="time">' + day + '-' + month + '-' + year + ' ' + hour + ':' + minutes + ' ' + amOrPm + '</span>';
        if (status == 'Hold') {
          searchResults += '<div class="pull-right">' +
            '<a href="javascript:void(0)" class="action accept" title="Accept"></a>' +
            '<a href="javascript:void(0)" class="action reject" title="Reject"></a> ' +
            '</div>';
        }
        searchResults += '</div>' +
          '</div>';
      }
    }
  });
  searchResults += '</div>' +
    '<a href="' + base_url + 'advanced-search" class="advanced">advanced search</a>';

  $('.search-inner').html(searchResults);





  TweenLite.set($('#quick-search').parent().find('.search-inner'), {
    display: 'block'
  });
}
$(document).on('click', 'a.view-details', function() {
    alert(1);    
});

Эта проблема возникает только для динамически добавляемого контента. Потому что я пытался вызвать это же событие просмотра сведений в другом разделе (содержимое загружается при загрузке страницы), и оно работает нормально.

UPDATE
Я удалил код для легкого понимания. Функция оповещения не работает при первом щелчке, потому что событие не срабатывает при первом щелчке

Answer 1

попробуйте щелкнуть документ в document.ready

Я надеюсь, что это работает

$(document).ready(function(){
     $(document).on('click', 'a.view-details', function() {
     //your code
     });
});

или вы можете попробовать перепривязать событие click в конце функции showAdvancedSearch () следующим образом:

$("a.view-details").bind("click", function(){
    alert("anchor is clicked");
});

Answer 2

Есть две вещи, которые вы можете сделать:

1. Добавьте обработчик события click после создания элемента
2. передает функцию onclick в детали просмотра, которая затем обрабатывает щелчок

Счастливое кодирование