jquery load() problem

Hi, I'm not sure if this is a problem, or a limitation of jQuery or my understanding.

I have a page which calls an external .js file with all my JS in it.

I am loading some HTML using jQuery.load(), and in that file is an element, let's say #myElement , and in the .js file I have some jQuery which displays an alert when #myElement is clicked.

I'll put it another way to be clear.  

1. I have a page, which includes a .js file, which includes this jQuery $("#myElement").click(funciton(){alert('HI');});
2. If the user clicks a particular tab, some HTML is loaded with jQuery.load(), and displayed in the page.
3.The loaded page includes <input type="button" id="myElement")>
4. If the user clicks #myElement, an alert box with 'HI' should appear.

My problem is that it isn't.  If I include the jQuery in the file that is loaded it works fine, but when I put it back in the .js file that is loaded with the first page, it won't.

I'm assuming this is some kind of binding issue, but I could have sworn that using load() does register all HTML with the DOM.  I thought I have done this succesfully in the past.

Is what I am experiencing a normal limitation of jQuery, or is there a way around it.

Apologies if my explanation makes no sense.

Many Thanks

Jason
Jay1607Asked:
Who is Participating?
 
HainKurtSr. System AnalystCommented:
ok got it ;)


<script type="text/javascript">
$(document).ready(function(){

var bindBehaviors = function() {
$("#btnStatic").click(function(){ 
  alert('HI html'); 
});
$("#btnAjax").click(function(){ 
  alert('HI ajax'); 
});

}; // bind behaviours

bindBehaviors();

$("#btnLoadAJAX").click(function(){ 
  $('#example-placeholder').html('<p><img src="images/ajax-loader.gif" width="220" height="19" /></p>');
  $('#example-placeholder').load("sample.html", function(){bindBehaviors();});
});

});
</script>

<input type="button" id="btnLoadAJAX" onclick="example_ajax_request()" value="Click Me!" />
<div id="example-placeholder">
  <p>Placeholding text</p>
</div>

-------------- loaded by ajax ---------------------------

loaded by ajax jquery...<br>
<input type="button" id="btnAjax" value="ajax button" />

Open in new window

0
 
HainKurtSr. System AnalystCommented:
do you have a link or code ;)
0
 
Jay1607Author Commented:
Hi HainKurt, thank you for taking a look.

plase see attached

"ONE" is included in the .js file of my "Main Page".

"TWO" is included in a file which is LOADING INTO "Main Page" using jQuery.load()

So..
I have 3 files.
1. scripts.js
2. Main HTML File, which loads scripts.js
3. Secondary file, which includes the the button, and is loaded into the Main HTML File with the load() function.

I hope this makes sense.. let me know if you need more.

Thanks again HainKurt

Jason
<!--ONE-->
$("#testClickMe").click(function(){
   alert('HI');
});

<!--TWO-->
<input type="button" id="testClickMe" value="Click Me" />

Open in new window

0
Cloud Class® Course: CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

 
HainKurtSr. System AnalystCommented:
can you please post the code for this piece "and is loaded into the Main HTML File with the load() function."
0
 
HainKurtSr. System AnalystCommented:
what happens if you add

$("#testClickMe").click(function(){
   alert('HI');
});

piece after load (?) function... idea is load the document and call above JQuery code instead of adding it to document.ready function...
0
 
HainKurtSr. System AnalystCommented:
check this sample to bind/unbind events at run time

http://docs.jquery.com/Events/unbind

if above post does not help...
0
 
HainKurtSr. System AnalystCommented:
after having a look at the link posted @ 26206997, I guess it should work for you...
0
 
Jay1607Author Commented:
Hi HainKurt, I am not sure I understand your suggestions...

Whether I put it before or after the load() is not a problem.  I can get it working fine, but only if I put the javascript inside the file that is loaded.

However, what I want to do (more architectural than anything) is to have all my javascript for this particular page in a single .js file, even the javascript that is required for elements loaded into the page with load().

The problem is, if have have the script in the .js file, then load some html int the page using load(), the javascript does not fire when the event occurs.
0
 
HainKurtSr. System AnalystCommented:
please post the code for loading the html...

what I mean is this
you have

document.ready (
  some functions here
)

turn this into

document.ready ({
  BindAll()
})

function BindAll(){
  some functions here
}

and after Load function (waiting for you to post this piece of code), call BindAll() again...
0
 
Jay1607Author Commented:
Gotcha.. I will give that a try..

My load functon is:

$("#tab-registration").click(function(){
                  if (loadedRegistration == 'FALSE'){                                                  
                        $.throbberShow({image: "/_css/images/throbber_3.gif", parent: "#content-registration"});
                        $("#content-registration").load('tab_Registration.cfm', { nocache : tstamp, event_id : eventID });                                    
                        loadedRegistration = 'TRUE';
                  }
            });
0
 
HainKurtSr. System AnalystCommented:
just try this for now

$("#tab-registration").click(function(){
                  if (loadedRegistration == 'FALSE'){                                                  
                        $.throbberShow({image: "/_css/images/throbber_3.gif", parent: "#content-registration"});
                        $("#content-registration").load('tab_Registration.cfm', { nocache : tstamp, event_id : eventID });                                    
                        loadedRegistration = 'TRUE';
$("#testClickMe").click(function(){
   alert('HI');
});
                  }
            });
0
 
Jay1607Author Commented:
OK, I think I see what you are saying now..

I tried this, but didn't work.  Generally the script worked fine .. loaded etc.. but clicking on #testClickMe still didn't fire the alert.
0
 
HainKurtSr. System AnalystCommented:
I hope above is clear enough... the second part is the sample.html

oops,

<input type="button" id="btnLoadAJAX" onclick="example_ajax_request()" value="Click Me!" />
-->
<input type="button" id="btnLoadAJAX" value="Click Me!" />

no harm but confusing, forgot to remove it...
0
 
HainKurtSr. System AnalystCommented:
check here too : http://docs.jquery.com/Tutorials:AJAX_and_Events

to get more info about above solution...
0
 
HaloWebProjectsCommented:
there is a simple solution for this, you are using click bind, for element which is not in DOM yet so thats why it dont work.. jquery 1.3 has a new tool for it, called live, that you may use for binding to elements which are not in the DOM yet and the bind will be persistent

ex:

$('#element_to _be_inserted_to_dom_ltr').live("click", function() {
   alert('H');
});

works like a charm...
0
 
Jay1607Author Commented:
Both great solutions.. the live() is certainly easier, and the one I am going for in this instance.

Reading up on it, it is a great feature, but does have some limitations and 'caveats', so there are times when HainKurt's approach would be the better one.

HainiKurt, thank you so much for your great assistance.  Very much appreciated.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.