So I've made an AJAX request, it submits fine and returns the HTML on success as expected - but in the HTML that is returned to the target div element, it has a button. I've added jQuery to this, that when it's clicked, it is to hide the HTML from the AJAX success.
In short: I want the close button to close the div, but it doesn't seem to be working.
$('#user_report__dd #make_report').click(function(){
var interaction_type = $(this).data('interaction_type');
var user_id = $(this).data('user_id');
$.ajax({
type: 'POST',
dataType: 'html',
url: ajax_url,
data: {
interaction_type: interaction_type,
user_id: user_id,
},
success:function(html){
// $('.ajax_call').html(html);
$('.ajax_call').html(html);
// stop body from scrolling
}
});
});
if(isset($_POST['interaction_type']) && $_POST['interaction_type'] == 'report_user'){
global $report;
$report->Form($_POST['user_id'], 'user');
// This returns the HTML
}
And then in my main jQuery file
$('.close').click(function(){
$(this).parents('.pulled_in_html');
});
Because the element doesn't exist in the DOM when your click event handler is created, it doesn't find the element. Instead you can delegate the event from body
like below:
$('body').on('click', '.close', function(){
$(this).parents('.pulled_in_html');
});
Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. That event listener analyzes bubbled events to find a match on child elements.
You can read more about event delegation here
Your code doesn't seem to be making any attempt at hiding anything and I don't know if you left this out on purpose or not, but to hide the element, you can chain the hide()
method onto this line:
$(this).parents('.pulled_in_html').hide();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.