jQuery trigger('click') not working with Jasmine-jquery - javascript

This is my test code:
describe("Login", function(){
beforeEach(function(){
loadFixtures('login-fixture.html');
})
it("should enable the button when checking 'remember password'", function(){
$('#remember').trigger('click');
expect($('#keepIn')).not.toBeDisabled();
});
});
And this is my production code:
$(document).ready(function(){
$('#remember').click(function(e) {
if($('#remember').is(':checked'))
{
$('#keepIn').removeAttr('disabled');
}
});
});
This is not working, the production code never gets called. I have put alerts before and after the trigger event and after the trigger the checkbox is checked, but the .click function does not get called.
Any thoughts on why is this happening?

Without seeing the rest of the code, I'm assuming the "login-fixture.html" contains the "#remember" checkbox. If so, it's loading after the DOM loads. Meaning that the 'click' event you want assigned will only apply to previously loaded elements. The jQuery on() event will assign any event you want to newly loaded elements. You might want to try adding a on() event to that id. Something like:
$(function(){
$('#remember').on('click', function(){
if($('#remember').is(':checked')){
$('#keepIn').checkboxradio('enable');
}
});
});
Hope that helps.
See: http://api.jquery.com/on/

Related

Jquery Click not working on test server

I'm kind of stuck and need some help. I've got the following code that I can get to work in a test document, but once it gets on my test server, it loads as it's supposed to, but then the fadeOut click doesn't work.
/* -- Show SignUp -- */
$(document).ready(function() {
function showBox() {
$("#box").fadeIn(500).removeClass('hidden');
};
setTimeout(showBox, 3000);
});
/* -- Hide SignUp -- */
$(document).ready(function(){
$("#close").click(function(){
$("#box").fadeOut(500);
});
});
You should use preventDefault:If this method is called, the default action of the event will not be triggered.
$("#close").click(function(e){
e.preventDefault();
$("#box").fadeOut(500);
});
Documentation: https://api.jquery.com/event.preventdefault/
From your code I see that event handler had been installed earlier, than element appeared on that page, so in this case it's necessary to use .live-type event handlers (to have it worked for all elements which will appear now or in the future).
Try to use following code:
$(document).on("click", "#close", function() {
$("#box").fadeOut(500);
});
From documentation: As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers.

jQuery prevent function to duplicate on click

I want to initiate a plugin only if clicked on its parent element (because that element is being appended with jQuery so it does not exist when page loads), So I am trying following code:
$(document).on('click', '.wrap', function(){
ColorPicker(
document.getElementById('slider'),
document.getElementById('picker'),
function(hex, hsv, rgb) {
});
});
This works fine, but every time I click on the .wrap, it duplicates (please check the demo to see the problem). Is there anyway to fix it?
Demo:
http://jsfiddle.net/rhzzG/
(Click in the box to see the problem)
Thanks.
Rather than using on() to trigger this event every time the element is clicked, simply use jQuery's one() method to only fire it once:
$(document).one('click', '.wrap', function(){ ... });
ColorPicker will then take over from there with handling its own events.
JSFiddle demo.
You may use one instead
$(document).one('click', '.wrap', function(){
//...
});

On events? Turn it off?

On keyup my script does something, I was wondering if I could turn it off, as in, I only want it to check one key up.
ckEditorNewsArticle.document.on("keyup", function(){
Edit:
ckEditorNewsArticle.document.on('keyup', function(){
alert('key up');
});
This works. But I cant get it to fire only once, by using one.
ckEditorNewsArticle.document.one('keyup', function(){
alert('one');
});
You can turn off events using (surprise, surprise), .off().
ckEditorNewsArticle.document.off('keyup');
If you want a handler to run only once though, might I suggest using .one()?
ckEditorNewsArticle.document.one('keyup', function () {
// do something
});
use .one():
Attach a handler to an event for the elements. The handler is executed
at most once per element.
Documentation: http://api.jquery.com/one/
Working example: http://jsfiddle.net/54ymc/

jQuery click event when triggered programatically

I have a link with an inline onclick event:
click
I registered an additional function on the onclick event:
jQuery("#addMoreOptions").live('click',function(){
console.log('clicked');
});
Which works fine when I click on the link on the browser, but not when I simulate programmatically:
jQuery("#addMoreOptions").click();
The programatical version triggers the inline event but not the "live" one.
When you have multiple functions attached to an event, what order does it use?
I am pretty sure this is caused by the order of things happening.
If you look at this live example you'll see everything works as expected. This is because the event is registered, and then called. The code looks like:
jQuery(document).ready(function(){
jQuery("#addMoreOptions").live('click',function(){
console.log('clicked');
});
$('#addMoreOptions').click();
});
function somefunction()
{
alert("clicked");
}
When the page loads, you get an alert and a console.log.
Now with the very small change of putting the $('#addMoreOptions').click(); before registering the event as in this live example you only get the alert from the inline function.
For reference the code is
jQuery(document).ready(function(){
$('#addMoreOptions').click();
jQuery("#addMoreOptions").live('click',function(){
console.log('clicked');
});
});
function somefunction()
{
alert("clicked");
}
An alternative way of triggering a click event would be to use the .trigger() function:
jQuery('#addMoreOptions').trigger('click');

Event handler does not apply to created element

I have put some easy codes below to clarify the title.
I am using JQuery 1.3.2
Here is my JS:
$(document).ready(function() {
$('#test').click(function() {
$('#result').html('hello world');
});
$('#hello').click(function() {
$('#result').html('Test #2');
});
});
In html, I have a hyperlink id='test' and a div with id='result'. What I expect this JS code to is when I click on test, it shows the "Hello World". After that, when I click the "Hello World", it supposed to show "Test #2"
Any suggestion is very helpful...
As hobodave says, this has nothing to do with Ajax.
The issue is that the click() functions are attached to the HTML when the document is loaded (on DOM ready). However, at that point the Hello world div doesn't exist yet. When it's created, it has no click event.
What you need is either to add the click() when the new div is added, or alternatively use the live() function to attach your event handlers.
$(document).ready(function() {
$('#test').live('click',function() {
$('#result').html('hello world');
});
$('#hello').live('click',function() {
$('#result').html('Test #2');
});
});
That said, an even easier method for the functionality you want is just to use hide() and show() on two already-existing divs.
First, your question has nothing to do with AJAX. This is pure javascript. The onClick listeners you are defining above are bound to the appropriate elements on page load (specifically the DOM Ready event). When the page loads, there is no element with id="hello", thus it doesn't get the listener bound to it.
What you need to do is nest the listener binding for id="hello" inside the click event for id="result"
e.g.
$(document).ready(function() {
$('#test').click(function() {
$('#result').html('hello world');
$('#hello').click(function() {
$('#result').html('Test #2');
});
});
});
It's because the click event handler for element with id="hello" that you set up in document ready does not get bound to the element as it does not exist in the DOM until the element with id="test" is clicked.
One way to resolve this would be to use event delegation and the live() command.
Another way would be to define the click event handler at the same time as adding the element to the DOM. The following will work fine in this scenario
$(function() {
$('#test').click(function() {
$('#result')
.html('hello world');
$('#hello').click(function() {
$('#result').html('Test #2');
// to prevent event propagation
return false;
});
// to prevent event propagation
return false;
});
});
There are specific jQuery commands for appending elements to other elements, the ones that would work well in this scenario are append() and appendTo(). This is an example using appendTo()
$(function() {
$('#test').click(function() {
$('hello world')
.click(function() {
$(this).replaceWith('Test #2')
})
.appendTo('#result');
});
});

Categories