Every time I press a button, there is a random chance that a alertify alert window popups. The alertify alert popup is something I use instead of javascript Alert, just to get a nicer design.
Alertify library
And here is a screenshot of the current situation:
I want to assign a event to the OK button. When I use the "inspect element" function in google chrome, I see that this green OK button has an id called "alertify-ok", so I want to assign an event when this button is pressed.
I've tried to add this part to my HTML document in the script part:
$( "#alertify-ok" ).on( "click",function() {alert("finally");});
But nothing happens. The reason why I need this to work, is that the youtube popupmodal should come up right after I've pressed the OK button. I belive the error comes because the alertify window with HTML is from an external library, so how can i do this?
Alerts and the others take callback functions on creation, https://github.com/alertifyjs/alertify.js/blob/0.3.12/src/js/alertify.js#L608. You don't need to attach another event listener, just give it the function you want it to execute. example below:
alertify.alert("alerttext", function(e) {
functionIWantToCall();
});
You can put the event on an element you know is already existent (like "body") and specify it to trigger only when the wanted element is clicked:
$(" body").on({
click: function () {...
}
}, "#trigger");
Related
I'm working on a page that opens a modal window when the user clicks a certain radio button. I want to trigger whatever that event handler is via my own jQuery code. Right now, I'm attempting to mimic a user clicking on the radio button by:
$("#myRadioButton").trigger("click");
The code works somewhat. The state of the radio button does become selected. However, the modal window does not open.
What must I do to trigger the events and event handlers that make the modal window open?
(Also, is there a way in Chrome DevTools to see what events are attached to an element?)
This will make the click function work, with a id on the element. You will need to make some logic for the modal itself, inside the function.
Not sure there is a way to see the events in the developer console.
$( "#myRadioButton" ).click(function() {
//Whatever you wants to happen, when you click the button
alert( "You clicked on #myRadioButton" );
});
Try and check out -> https://jquerymodal.com/
Using dot.js I'm adding a button to a specific web page that, when clicked, should add some text to a text field and then trigger another button to also be clicked. I simulate this by adding a click handler to my button which has this code:
var button = $('.some-class').find('button')[0];
console.log(button); // element I expect
button.click();
However, this doesn't work and I'm not sure why. If instead of .click() I perform .remove(), the button is removed from the page. If I use the console to execute the same code, the button does get clicked. This tells me I do have the right element, but there is something wrong with the click() event specifically.
Can someone explain why this isn't working in either Safari or Chrome? I've tried a lot of different things, but I'm new to jQuery so I'm probably missing some detail in how that works.
We went to the bottom of this in the chat. What probably caused the problem was another event-handler attached to (possibly) body, that undid the click.
So the solution was to stop the event from propagating:
event.stopPropagation();
While assigning the click event handler to the button you should use jquery on
This should ensure that whenever a new button with added with same selector (as in when event was assigned), event handled will be assigned to that button
Some examples here
The problem is the click() function is from jquery and you're attempting to fire the click function from the DOM object.
Try
$(button).click();
Here's a plunk.
http://plnkr.co/edit/2pcgVt
You can use the following statement.
var button = $('.some-class').find('button')[0].trigger('click');
try jquery's trigger() function:
$(button).trigger('click');
see jsfiddle: https://jsfiddle.net/665hjqwk/
I have a very simple click handler that makes an AJAX GET request on click like so:
$('span.switch-option').click(function() {
$(this).parents('div.log-in-option').hide();
$(this).parents('div.log-in-option').siblings('div.log-in-option').fadeIn();
});
This works perfectly anywhere else on the website. However, when I try to click a <span> element with the class switch-option inside a modal window, the event does not fire. Entering the contents of the click-handler function in the console and running them does perform the desired behavior, however.
Why will the click handler not fire in this modal window? I am using the popular SimpleModal plugin http://www.ericmmartin.com/projects/simplemodal/ and jQuery 1.9.1.
A live example is here: http://ec2-107-22-8-70.compute-1.amazonaws.com/thread/19. If you click the 50,000 reps or any user's reputation then try to click the big blue link in the dialog, the click handler does not fire. This behavior happens with other click handlers in different modal windows as well.
When your script(main.js) is running the elements 'li.log-in, a.log-in' does not exists in the dom, they are loaded dynamically when the popup is created thus jQuery is not able to bind the event handlers
Try event propagation
$(document).on('click', 'li.log-in, a.log-in', function() {
$.get('/login/', function(data) {
//make a modal window with the html
$.modal(data);
});
return false;
});
I'm making an edit button which pops up a modal box with a form to edit it. jQuery then sends this form to my server and I get a JSON response back. However, due to my bubbling issue, if I click on, for example, all of the edit buttons and then click on the last one and change a field, it does it across all of them.
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
and then the submit event:
function modal_submit(the_id){
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
}
finally all of this is inside of a getScript:
$.getScript('js/edit.js',function(){
create_edit_btn();
});
I've only used this 1 other time, and it worked, but I also had to do this.event.stopPropagation, but if I do "this" now it says this.event is undefined, but like I said, this exact code worked before for another script I did.
Does anyone have any ideas? :\
EDIT:
the html is:
<li>
<input id="item1" type="checkbox" value="webhosting|15" title="Web Hosting">
<p>Hosting for your web site</p>
</li>
An event can have multiple event listeners. Each time you use $(element).submit(whateverFunction) you are adding another whateverFunction to the submit event. If you only want only the last listener to be the action that is taken upon envoking the event, try doing this:
function modal_submit(the_id){
$('#modal form').unbind(); // this will remove all other event listeners from this element
$('#modal form').submit(function(){
//This will alert every time I have EVER clicked on an edit button
alert(the_id);
return false;
});
I think you event.stoppropagation does its job already. It stopped all the bubbling on the click event of the button (ie, if you try checking the document body, it won't have mouse click event anymore). The reason why codes within submit of the form is still executed, is because this is called by the button's default action.
Together with event.stoppropagation(), I suggest you include this:
event.preventDefault();
So that the default action will not used and only the codes within your handler is executed.
Is this in the function that creates edit buttons?
$('.edit').click(function(event){
//more code...
modal_submit(the_id);
event.stopPropagation();
});
If it this, then it will add this handler multiple times to the same elements, causing a flurry of alerts. Use live, which will place the handler on every matched element, even if is is added later in execution.
Heres my link:
http://tinyurl.com/6j727e
If you click on the link in test.php, it opens in a modal box which is using the jquery 'facebox' script.
I'm trying to act upon a click event in this box, and if you view source of test.php you'll see where I'm trying to loacte the link within the modal box.
$('#facebox .hero-link').click(alert('click!'));
However, it doesn't detect a click and oddly enough the click event runs when the page loads.
The close button DOES however have a click event built in that closes the box, and I suspect my home-grown click event is being prevented somehow, but I can't figure it out.
Can anyone help? Typically its the very last part of a project and its holding me up, as is always the way ;)
First, the reason you're getting the alert on document load is because the #click method takes a function as an argument. Instead, you passed it the return value of alert, which immediately shows the alert dialog and returns null.
The reason the event binding isn't working is because at the time of document load, #facebox .hero-link does not yet exist. I think you have two options that will help you fix this.
Option 1) Bind the click event only after the facebox is revealed. Something like:
$(document).bind('reveal.facebox', function() {
$('#facebox .hero-link').click(function() { alert('click!'); });
});
Option 2) Look into using the jQuery Live Query Plugin
Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.
jQuery Live Query will automatically bind the click event when it recognizes that Facebox modified the DOM. You should then only need to write this:
$('#facebox .hero-link').click(function() { alert('click!'); });
Alternatively use event delegation
This basically hooks events to containers rather than every element and queries the event.target in the container event.
It has multiple benefits in that you reduce the code noise (no need to rebind) it also is easier on browser memory (less events bound in the dom)
Quick example here
jQuery plugin for easy event delegation
P.S event delegation is pencilled to be in the next release (1.3) coming very soon.