javascript on the main page is not working in the dynamically loaded content
Question
I am loading content via ajax get, in to a div, I have 3 pages:
index dynamic content loaded via ajax javascript.js
Now when I load data in to the index via:
$.ajax({
url: target,
type: 'GET',
}).done(function(data)
{
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
});
});
the javascript doesn't work on it, even though I am including the javascript file on the main index.
I have tried binding like so:
$(function()
{
$('.inner_modal').on("submit", "#account-login-form", function()
{
$('.ajloading').show();
$.ajax({
url: $(this).attr('action'),
type: $(this).attr('method'),
dataType: 'json',
data: $(this).serialize(),
success: function(data)
{
if(!data.success)
{
$('#error_message').html(data.error + alert_close).show();
}else{
<?php if(Session::get('refer') == true && Session::get('refer') != 'user/logout'): ?>
window.location.href = '<?php echo Config::get('URL'); ?><?php echo System::escape(Session::get('refer')); ?>';
<?php else: ?>
window.location.href = '<?php echo Config::get('URL'); ?>dashboard';
<?php endif; ?>
}
$('.ajloading').hide();
}, error: function(data)
{
$('.ajloading').hide();
}
});
return false;
});
});
I have tried it like so:
$(document).on("submit", "#account-login-form", function()
I have also tried it without
$(function(){});
Now when I unclude the javscript file inside the dynamically loaded content it works, but I can't do that for every file, plus it would bloat my script, so how can I fix this so the dynamic content works with my main js file.... Here's how I do it:
<body>
<div class="modal-content">
<!-- dynamic content loaded !-->
</div>
</body>
<script>
$.ajax({
url: target,
type: 'GET',
}).done(function(data)
{
$(".modal-content").html($(data).find('.inner_modal'));
$(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>');
});
});
</script>
<script src="myjs.js"></script>
</html>
1 answers
solution1
0 ACCPTED 2016-04-12 20:38:42
I think your problem is that 'submit' is not an event that bubbles. You should assign a click handler to the form directly after it is loaded via ajax.
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.