I'll present my problem in a topic manner bellow, tks in advance for reading!
Function:
$("#someAJAXContainer").load("someHTML.html");
Context: I want to have only one start page and then I'll add a div on the middle where all the content will be loaded dynamicly. Very similiar (if not the same) to a Master page.
...
<body>
<div id='menu'></div>
<div id='someAJAXContainer'></div>
<button>loadAjaxDiv</button>
<div id='footer'></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery-ui.min.js"> </script>
<script src="functions.js></script>
</body>
...
The functions.js would be like this:
$(document).ready(function(){
$("#someAJAXContainer").load("someHTML.html");
$("button").button();
$("#responseA").click(function(event){
alert("the link should no longer took you to jquery.com");
event.preventDefault();
});
});
Problem: When the AJAX Response HTML is loaded on the container it's not linked to already existent JQuery code. So if the 开发者_JS百科response is something like:
<div id ='response'>
<a id = 'responseA' href="http://jquery.com/">jQuery</a>
</div>
The link will take you at the same to jquery.com page :(
So my approach to solve this is using (on the functions.js):
$("#someAJAXContainer").load("someHTML.html", function() {
$("#responseA").click(function(event){
alert("the link should no longer took you to jquery.com");
event.preventDefault();
});
});
But now I'm having multiple levels of inner ajax and it's getting a messy code! I don't like that much the way it's being worked out. So I wonder what kind of errors I might be doing here. Is this even correct at structural, good pratices, level?
Hope I been clear about the issue. I been googling about it and the only answers I've got were similiar to the one proposed before, but it was all very vague.
Regards;
Try using live.
$("#responseA").click(function(event){
alert("the link should no longer took you to jquery.com");
event.preventDefault();
});
This will bind the click event only to #responseA element that is in the DOM at start, but wont work for any other that you load later. Live will solve this
$("#responseA").live('click', function(event){
...
});
Complementing RealShadow. As I've stated in my reply you can see that .live() won't solve issues where one wants to change elements properties or behaviour, it only allows you to attach events listeners.
Therefore, for a situation like trying to make for a button tag to behave as button, for example:
<div id='response'><buttonOK>ok</buttonOK></div>
The solution that I found more interesting is to add an .ajaxStop() or .ajaxSuccess() event listener. It will work as a $(document).ready(function() {}) for the AJAX calls, so all the AJAX.ready() can be setup on this. One must take into account that the identifier $("#ajaxContainer") must be pointing to the container where the HTML response is loaded so that it can find its newly generated child DOM.
$("#ajaxContainer").ajaxStop(function() {
// Ajax handler called.
$("buttonOK").button();
});
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论