Menu
The below code works. If there is some better way please let me know. If i use the script content which is present in test.html in the main page where I am loading test.html through ajax. The script doesn't work.
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
});
</script>
</html>
Test.html:
<h1 class='heading'>Page via AJAX</h1>
<script>
$(function(){
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
we have to load the script along with dynamically loaded content through ajax to work as you require.But disadvantage I felt was each time we send ajax request script loads all the time along with content. But I found only this solution. If anyone knows better solution please reply.
For example if change the code this way it wont work.
<html>
<head>
<script src='jquerylocation' type='text/javascript'></script>
</head>
<body>
<div id='ajaxload'></div>
<button class='test'>load content via ajax</button>
</body>
<script>
$(function(){
$('.test').on('click',function(){
$('#ajaxload').load('test.html');
});
$('.heading').on('click',function(){
$(this).css('color','red');
});
});
</script>
</html>
Test.html:
<h1 class='heading'>Page via AJAX</h1>
685
Perform a AJAX GET request to get data from serverCreate a MySQL table and insert data. Create HTML form and jQuery script to perform AJAX GET Request to PHP MySQL Server. Write a PHP script to receive request from client and fetch data from MySQL database and send a JSON encoded result to client.
The ajaxComplete() method specifies a function to be run when an AJAX request completes. Note: As of jQuery version 1.8, this method should only be attached to document. Unlike ajaxSuccess(), functions specified with the ajaxComplete() method will run when the request is completed, even it is not successful.
click(function() { debugger; $. ajax({ //data :{action: "showroom"}, url :"index. php", //php page URL where we post this data to view from database type :'POST', success: function(data){ $("#content"). html(data); } }); }); });
It's because you are binding the event on document ready. You have to use a delegate in order for this to work. Like on. It's because .header isn't on the page on the page when it's loaded. So no event is attached.
Your code should look some along the lines of this:
$('body').on('click','.heading',function(){
$(this).css('color','red');
});
It doesn't have to be body, but an element which isn't loaded after document ready, which is a parent of .heading.
134
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
