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

Question

I am trying to implement keyword search in my site. And search result contains an anchor to get the detailed view. And it shows a popup in the click event of anchor. But my problem is, this popup do not render in first click. If I again click the link the popup will come. I am here pasting a screen shot of my search window and my script. Someone please help me to rectify this issue.

Script :

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

This issue is happening only for dynamically added content. Because I tried to trigger this same view details event in another section(contents loaded in page load) and its working fine.

UPDATE
I removed some code for easy understanding. The alert function is not working in first click, because the event is not triggering in first click

Answer 1

There are two things you can do:

1. Add the click event handler after you create the element
2. pass a onclick function into your view-details which then handles the click

Happy coding

Answer 2

try document click in document.ready

i hope it works

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

or you can try rebinding the click event at the end of showAdvancedSearch() function like this

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