I am new to Js and Ajax. I am calling a page through ajax (using jquery). the called page has a button. On button click, i need an alert box. But the event listner is not acting on the button click.
function setUpClickHandler() {
addEventHandler(document.getElementById('sideLink1'), "click", onsideLinkClicked1, false);
addEventHandler(document.getElementById('EnrollButtonClick11'), "click", onEnrollButtonClick11, false);
}
function onsideLinkClicked1(e) {
$('#CrousalLoad').load('crousal1.html');
}
function onEnrollButtonClick11(e) {
alert("hello");
}
crousal1.html is the loaded page and "EnrollButtonClick11" is the button id inside the page. Is there anything I am missing here. Plz add comments for any clarifications as I am struck here. Thanks in advance.. :)
if your using jQuery you can skip that in just do this.
$("#sideLink1").click(function (){
alert('hello');//you do it directly in the function
onEnrollButtonClick11(); //or call a function from here.
})
Source:
http://api.jquery.com/click/
says the same thing.
This probably happens because the button you are registering a click to with the id of EnrollButtonClick11 doesn't exist on the page at that moment. Since you are using jQuery try something like $('body').on('click', 'EnrollButtonClick11', onEnrollButtonClick11);
Related
I am trying to run this custom 'getOffer()' event using jQuery
<img src="images/img.jpeg">
I have tried the following but it doesn't seem to work (I am using the Firefox Firebug console.log window)
$('a[title="Submit for offer"]').trigger('getOffer');
This is the page I am trying this on: http://bit.ly/1dpIMFk
Can anyone suggest any ideas?
<img src="images/img.jpeg">
$(document).ready(function(){
$('a[title="Submit for offer"]').trigger('getOffer');
});
function getOffer(){
alert('link clicked');
}
Seems working fine for me.I think you didnt wrapped your event trigger in document ready.
DEMO
You can use
<img src="images/img.jpeg">
Creating an custom event on jQuery
First add some identifier (id/class) to your link
<a id="linkOffer" title="Submit for offer"><img src="images/img.jpeg"></a>
Then, create your CUSTOM event.
//The function that will to the getOffer things
function getOffer() {
//Do get offer...
}
$(document).ready(function(){
//Custom event pointing to the function
$('a#linkOffer').on('getoffer',getOffer);
//Default click event
$('a#linkOffer').on('click',function(e){
//Do click stuff.
//Trigger your custom event.
$(this).trigger('getoffer');
//If you wish to not move the page, prevent the default link click behavior (moveing to other page)
e.preventDefault();
});
});
Trigger will not function because it search click attribute in element. Work around for this can be is:
Add click attribute to the element and then call the jquery function.
<button value="yu" onclick="getOffer();"/>
<script>
$("a[title='Submit for offer']").attr("onclick",$("a[title='Submit for offer']").attr('href')); // get value from href
$("a[title='Submit for offer']").trigger('click');
function getOffer()
{
alert('j');
}
</script>
I added onclick using dojo to one of my divs
dojo.connect(dojo.byId("button1"), "onclick", function () {
alert('clicked');
}
I now need to call the exact same function dynamically in some other part of Javascript, I tried
dojo.byId("button1").onclick();.
It did not work. Please help me in resolving this issue.
This works for me:
dojo.query("#button1").onclick(function(e){
alert('clicked');
})
dojo.byId('button1').click();
Here's a JSFiddle with it.
After initialize js I create new <div> element with close class and on("click") function doesn't work.
$(document).on('click', '.post-close', function () {
alert("hello");
});
but on('hover') work perfectly.
$(document).on('hover', '.post-close', function () {
alert("hello");
});
but I need to make it work on click.
It's because you're not preventing the default behaviour of the browser. Pass e into your handler and then use e.preventDefault()
$(document).on('click', '.post-close', function (e) {
e.preventDefault();
alert("hello");
});
Edit
Also, bind the handler before creating the new <div>
why not use something like
$('.post-close').click(function(){
//do something
});
If the element was added dynamically use:
$(document).on('click', '.post-close', function(){
//do something
});
edit:
like danWellman said, you can add the preventDefault IF you want to make sure no other code is executed. otherwise use the code above.
edit2:
changed the .live to .on
It's an old post but I've had a exactly same problem (element created dynamically, hover works, but click doesn't) and found solution.
I hope this post helps someone.
In my case, I found ui-selectable is used for parent element and that was preventing from click event propagate to the document.
So I added a selector of the button element to ui-selectable's 'cancel' option and problem solved.
If you have a similar probrem, check this
Try turn of libraries for parent element
You're not using stopPropagation() in parent element ?
i am modifying the inner html through javascript, and the inner html involves a button
but when i put in the jquery code to run on the button click event it fails to do so ..
sorry but im a newb when it comes to javascript
content im adding into the html ..
function add()
{
var val=document.getElementById("ans").value;
document.getElementById("answers").innerHTML+="<tr><td>"+val+"<br/><p align=\"right\"><button class=\"replyb\">replies</button></p>"+"</td></tr>";
document.getElementById("ans").value="";
}
jquery code ...
enter code here
At a guess, because we don't have your jQuery, I would say you need to use .live() instead of .click() when you change the HTML the button will be NEW to the DOM.
When you apply your jQuery code, it adds any calls like .click() to any DOM item, when the page loads. So any NEW element doesn't have a .click() handler added to them.
Do solve this, you can change your .click():
$('#someitem').click(function() {
.....
});
To something like this:
$('#someitem').live('click', function() {
.....
}
Add the following in your page at some place and it will handle clicks to all .replyb buttons whether you add them with javascript at any time, or not.
$(function(){
$('button.replyb').live('click', function(){
alert('clicked on button');
});
});
have a look at jquery .live() method
In my project i have used master page.In one particular page , i want a function to be executed on page unload(javascript event) event of that particular page.To achieve this i have written
$('body').bind('unload',function()
{
alert('hello');
} );
But this is not working.This function is not getting called when i move to other page.
How should i achieve this.
Well, I suppose its a problem when writing the question but your code should be:
$(window).bind('unload',function()
{
alert('hello');
});
You are missing the ending ); and the event should be bound to the window...
[Edit: Added the bind to the window instead of 'body']
$(window).bind("unload", function(){
alert(123);
});
worked for me :)
$(document).ready(function(){
$(window).unload( function () {
alert("Bye now!");
} );
});
try this. the document.ready function runs on pageload. so your bind will execute and is should work.