动态内容的click事件未在首次点击时触发

Question

我正在尝试在我的网站中实现关键字搜索。 搜索结果包含一个锚点以获取详细视图。 并且在锚点的click事件中显示了一个弹出窗口。 但我的问题是，此弹出窗口不会在首次单击时呈现。 如果我再次单击该链接，将弹出弹出窗口。 我在这里粘贴我的搜索窗口和脚本的屏幕截图。 有人请帮助我纠正此问题。

剧本：

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);    
});

仅对于动态添加的内容会发生此问题。 因为我试图在另一部分（页面加载中加载的内容）中触发相同的视图详细信息事件，并且其工作正常。

更新
我删除了一些代码以便于理解。 警报功能在第一次单击中不起作用，因为事件不是在第一次单击中触发

Answer 1

您可以做两件事：

1. 创建元素后添加click事件处理程序
2. 将onclick函数传递到视图细节中，然后处理单击

快乐编码

Answer 2

尝试在document.ready中单击文档

我希望它能起作用

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

或者您可以尝试在showAdvancedSearch（）函数末尾重新绑定click事件

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