Clicking objects created with Handlebars doesn't work - javascript

I upload all the stuff so you could see what I mean: http://nonemoticoner.com/learning/jquery/clickbug/
The point is that I cannot click divs I created with Handlebar, this is:
firstthumbin (id),
restthumbing (class)
They exist on thumbnails so I could use them to switch between galleries.
In script.js I created handlers in jQuery so I could click ones. None of them work :(
$('div#firstthumbing').on('click', function () {
console.log('clicked first');
changeSli(galInView, 0);
});
$('div.restthumbing').on('click', function () {
console.log('clicked rest');
changeSli(galInView, 1);
});
$('.thumb').on('click', function () {
console.log('clicked first thumb');
changeSli(galInView, 0);
});
I don't know why but a little above click works correctly. Is that because of Handlebars? How can I solve it? Please help me, I really tried to fix it by myself but this thing is really new to me. Click always used to work for me.

You are loading the firstthumbing after "onload" event, and you click function not binding becouse the element doesn't exist on DOM whe you run the script to haddle the click function.
Try to call the click function before create you clickable thumbs.

Related

JQuery click() event listener not working

im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k
The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})
I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});

Only buttons on first page of table are clickable when using pagination - List.js

I recently asked a question about the inability to click a table row and popup an alert when on any page but the first using List.js pagination.
This was solved by adjusting my click event to:
$('#test-list').on('click', 'tr', function() {
alert("These work, but the rest don't :(")
})
Now I seem to be having the same trouble with buttons, but am not sure how to fix the click event.
This is the click event as it sits:
$(".test-button").on("click", function ()
{ alert("These work, but the rest don't :(");
});
Here's a codepen so you can check out the issue:
http://codepen.io/cavanflynn/pen/gpdgvj
It's probably also a simple fix, but I cannot come up with the solution.
Thanks for your help!
for the buttons use a static reference to bind the event and then pass the button class like this:
$("#test-list tbody").on("click", ".test-button",function () {
alert("These work, but the rest don't :( ..... but now seems working :) ");
});
working pen http://codepen.io/anon/pen/XbPpPK

Hidden Content and Jquery 2 Clicks to Fire

I know there are a few questions related, but I wanted to ask the question more clearly. I took the time to duplicate my issue on jsfiddle (link at bottom).
I have a jquery event:
$(document).ready(function () {
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).dropdown()
;
})
});
The dropdown menu is located inside of a modal, which isn't actually present until THAT div is clicked, with
$('.item.contact').on("click", function () {
$('.ui.modal')
.modal('show')
;
})
The problem is that when I load the modal, and then click the dropdown menu, the menu takes two clicks before it fires. I am guessing this is because the dropdown isn't available on page load. The first click loads it, the second click fires it? I'm not sure but would appreciate assistance!
Please see the jsfiddle
Try setting the show option when you create the dropdown:
$(this).dropdown('show', true)
Fiddle: http://jsfiddle.net/o8r0fzfg/8/
I tried the code below and it works!
$(document).ready(function () {
$('.ui.contact.selection.dropdown').dropdown();
//CONTACT MODAL
$('.item.contact').on("click", function () {
$('.ui.modal').modal('show');
});
});
I believe the "dropdown" should be fired on pre-loading.
Looking at the documentation for semantic, it seems that the first .dropdown will create the object, and the second will cause the toggle to fire (by default). If you want to make it a toggle operation, try the following:
$(document).ready(function () {
...
$('.ui.contact.selection.dropdown').dropdown();
$('.ui.contact.selection.dropdown').on("click", function () {
$(this).behavour("toggle");
});
});
This event will handle not only open, but also close.
JSFiddle

Onload fires no matter where I place it

Right, I'm getting quite aggitated with this. I'm probably doing something wrong, but here's what I'm doing:
$(document).ready(function () {
$('#somebutton').click(function () {
openPage1();
});
$('#someotherbutton').click(function () {
openPage2();
});
});
var openPage1 = function () {
$('#iframe').attr('src', 'someurl');
$('#iframe').load(function () {
$('#button').click();
});
};
var openPage2 = function () {
$('#iframe').attr('src', 'anotherurl');
$('#iframe').load(function () {
$('#anotherbutton').click();
});
}
Whenever I click somebutton everything goes as expected. However when I click someotherbutton. The .load() from openPage1() is called first and I can't find a way to stop that. The .load() from openPage1() has a button with the same name, however on openPage2() I need to modify the contents before clicking the buttons.
I need to use .load() because I can't click the buttons before the document is ready.
Basically what I need is two seperate .load() instances on the same iframe, that don't fire off on each other.
Besides that, maybe my understanding of jQuery/JS is wrong, but shouldn't the .load() events only be listening after clicking the corresponding button?
Can someone help me out, this has been keeping me busy all afternoon.
Try using on, and once loaded, unbind
$("#iframe").on("load", function(){
$(this).off("load");
$('#button').click();
});
That way you remove the handler you put up before the second button is clicked?
By writing : $('#iframe').load(function (){ $('#button').click(); });, you are adding a listener on the load event, which will stay and be re-executed on each subsequent reload of the iframe.
Here is a jsfiddle to demonstrate this : click on the "reload" button, and see how many times the "loaded" message appears in your console.
in your case, if you click on #somebutton, then on #someotherbutton, after the second click, you will have two handlers bound on the load event, and both will be triggered.
If you click 5 times on #somebutton, you should end up calling 5 times $('#button').click().
If you want to execute it once, you can follow Fred's suggestion, or use jQuery .one() binder :
$('#iframe').one('load', function(){ $('#button').click() });
Here is the updated jsfiddle : 'loaded' should be displayed only once per click.
Maybe try and replace the lines in both functions like this:
$('#iframe').load(function() {
$('#anotherbutton').click();
};
$('#iframe').attr('src', 'anotherurl');
Otherwise it might be firing the event before the new event-handler has been set.
This isn't really an answer to your problem Now it is an answer, but I think utilizing functions as they were intended could be beneficial here, i.e.:
//Utilize a single function that takes arguments
var openPage = function (frame, src, eventEl) {
frame.attr('src', src); // If you pass frame as a jQuery object, you don't
frame.on("load", function(){ // need to do it again
$(this).off("load");
evEl.click(); //Same for your buttons
});
}
//Simplify other code
$(document).ready(function () {
$('#somebutton').click(function () {
openPage($("#iframe"),somehref,$("#buttonelement"));
});
$('#someotherbutton').click(function () {
openPage($("#iframe"),anotherhref,$("#someotherbuttonelement"));
});
});

jQuery click() not working on replaced html

I am trying to create a go-moku game using jquery,php, and mysql database.
I have a ajax function that updates the a board every second if needed.
var turnCount = -1;
setInterval(function(){
$.get('includes/boardControl.php',{turn: turnCount }, function(data){
if(data != "")
{ $("#board").html(data);
turnCount = $("#turnCount").text();
$("#turnCount").text("")
}
});
}, 1000);
This works just fine, it checks the database to see if turn has been incremented and replaces the board if it has. Now what I want to ultimately do is create a click function that use Ajax to update the board and turn count in the database. I am hoping to somehow use the N'th selector do determine what square I'm clicking on.
I have several questions.
1) My click function right now is
$(document).ready(function() {
$("td > img").click(function(){
alert("clicked");
});
});
as of right now it works on a extra test table I wrote into the html, but not on the table created with the previous function. What am I doing wrong?
2) The tutorials I've looked at so far dictate that I should write code in the following way.
$(document).ready(function() {
//code here
});
When i asked a question last night, I was told that I was over complicating things with my functions. So when should i use a document.ready function and when not? And is it fine to put all of my scripts into one document.ready function or should I have multiple?
3)
Once I get the click image to work I am hoping to send a X,Y coordinate to the server and change that corresponding spot on the board. How would I determine what cell in the table is clicked in order to know what coordinates to use? (or is there a much easier way?)
sounds like you need to change
$("td > img").click(function(){
alert("clicked");
});
to
$("td > img").live('click',function(){
alert("clicked");
});
Edit: For jQuery 1.9 and later you can do:
$("#board").on('click', 'td > img', function(){
// handle click
});
The $(document).ready() function only fires when the page first loads - in order to make this work try something like this:
function bindClicks() {
$("td > img").click(function(){
alert("clicked");
});
}
$(document).ready(bindClicks);
This will allow you to call bindClicks() later on if need be to bind the click events of a new table.
1) Are you re-wiring the click event after the ajax content loads?
The $(document).ready function will fire as soon as the page is fully loaded, but won't fire after ajax calls. So you will need to re-wire the click event after every ajax call:
2) KISS. Keep it as simple as possible. If you have 50+ lines inside a document.ready statement you might want to create some functions.
3) The best way to accomplish this might be to assign a specific ID to each cell and capture that in the click event. You can then pass that to the server and update the specific cell on the return.
Are you sure JQuery is matching you query:
$("td > img")
I would load firefox with firebug and check that your actually getting match first. The second table your creating may have a slightly different structure then you expected and firebug can show you the exact structure also.
Goodluck.

Categories

Resources