for some reason I cannot make this simple thing to work:
for (var i = 0; i < results.length; i++) {
var object = results[i];
$("#recipes_names").append("<div id =" + "recipe" + i + " >");
$("#recipes_names").append(object.get('recipe_title'));
console.log(object);
console.log(object.id + ' - ' + object.get('recipe_title'));
$("#recipe1").click(function(e) {
e.stopPropagation();
alert("inside click");
});
}
},
I create divs within the "recpie_names" div with the name "recipe0"/"recipe1" etc and I can't for the life of me make them clickable.
I'm sure there's a tiniest of mistakes that I make here but I just can't nail it down.
Can you help me out?
Add a class to the div which is appended and instead of adding event on base of id add just one event on class selector and write just on event:
$("#recipes_names").append("<div class='recipe' id =" + "recipe" + i + " >");
and:
$(document).on("click",".recipe",function(e) {
e.stopPropagation();
alert("inside click");
});
You have to delegates your event
$('#recipes_names').on('click', 'div[id^=recipe]', function(e){
e.stopPropagation();
alert("inside click");
});
It looks like you are generating these divs after the fact. So .click will not work.
Try:
$("#recipe1").on('click', function(e) {
e.stopPropagation();
alert("inside click");
});
Related
I have the following peice of code which binds click events to multiple anchor tags present in a div.
I want to determine which link was clicked (1st link or 2nd link or nth link) so that I can pass it to myFunction.
function bindClickEvent(){
$.each($("#links > li > a"), function(index, element){
$(element).click(function(event){
myFunction(linkID);
});
});
}
The reason I use the above type of function is because the anchor tags created in links div are dynamically created. i.e building html using other function
try something like this: http://jsfiddle.net/wo3o55yL/1/
<div>
One
Two
Three
Four
</div>
<script type="text/javascript">
$('a').on('click', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
</script>
First point will be indexed with zero so thats why one is 0 and two is 1 and so on...
You should use event delegation to achieve this goal, like this:
Given HTML:
<div id="links" >
</div>
JavaScript:
$(function() {
// Just a simulation for dynamic links
setTimeout(function() {
var as = [];
for(var i = 0 ; i < 5 ; ++i) {
as.push('Element-' + (i+1) + '');
}
$('#links').html(as.join('<br />'));
}, 2000);
// Event delegation
$('#links').on('click', 'a', function(e){
e.preventDefault();
myFunction($('a').index(this));
});
function myFunction(id) {
alert('my function - ' + id);
}
});
You can do this way also, see working demo http://jsfiddle.net/g8k1csz9/
<ul id="links">
<li>Something1</li>
<li>Something2</li>
<li>Something3</li>
<li>Something4</li>
</ul>
$( "#links li a" ).click(function() {
var index = $('#links li a').index(this);
myfunction(index);
});
function myfunction(index){
alert(index);
}
I have a strange problem with JQuery when I try to click on append element that is inside timeout function
I got the following code:
function generate(){
box = shuffle(box);
console.log(box);
$("#game").empty();
for (var i = 0; i < 4; i++) {
$("#game").append("<div class=box>" + box[i] + "</div>");
}
}
function lvl1(){
box = shuffle(box);
console.log(box);
$("#game").empty();
for (var i = 0; i < 4; i++) {
$("#game").append("<div class=box>" + box[i] + "</div>");
}
}
generate();
setTimeout(function(){
lvl1();
}, 1000);
$(".box").click(function(){
alert("OK");
});
If I try to click on box within a 1 sec the alert is showed correctly but if I try to click after the timeout it does nothing also no error is showing
http://jsfiddle.net/f4kgvaL5/
The .box elements are being appended dynamically, so you need to use a delegated event:
$("#game").on('click', '.box', function () {
alert("OK");
});
Updated fiddle
This looks like an event delegation issue. On the new boxes created during lvl1 you arnt assigning the event handler again.
Try
$( "#game" ).on( "click", ".box", function(){
alert("OK");
});
see the code:-
$(document).on("click",".box",function(){
alert("OK");
});
working example:-
http://jsfiddle.net/f4kgvaL5/2/
thanks
Need to prevent the emergence of tips several times (when not a single clue pointing at a link persists even if the cursor is not on a link).
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.fadeOut();
});
});
To understand the problem to move the red square over several times, and then remove it in the direction
http://jsfiddle.net/8LnTC/1/
I apologize for my bad English
You need to stop any queued animations first...
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).attr("id") + "");
tooltip.stop().fadeOut();
});
});
Working jsfiddle example...
Incidentally, you shouldn't have multiple elements with the same ID. You need to rethink how you're going to relate the elements to each other - maybe use data attributes.
Here's a suggested alternative...
Working jsfiddle example...
HTML change
<a class="area_tooltip" data-associated-tooltip="item_1">show</a>
Javascript change
$(function () {
$(".area_tooltip").mouseover(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeIn();
}).mouseout(function () {
var tooltip = $("div#" + $(this).data("associated-tooltip"));
tooltip.stop().fadeOut();
});
});
You put the tip's ID in the attribute data-associated-tooltip and then you can access that with $(this).data("associated-tooltip"). That will get rid of any ID conflicts which will most likely cause untold problems.
i want a neat solution to handle event for a drop down menu , so that when user opens the select menu , it alerts opened , and when he closes it , it alerts closed , neglecting wheather the selected value is changed or not.
<select id="dummy">
<option>dummy1</option>
<option>dummy2</option>
<option>dummy3</option>
</select>
what i want is something like
$("#dummy").on('open',function(){//do something})
$("#dummy").on('close',function(){//do something})
something like heapbox
http://www.bartos.me/heapbox/
and this solution is not acceptable : Run change event for select even when same option is reselected
the typical approach to extending the native functionality of a select box is to replace it with styleable markup and then tie the values of the new markup back into the origninal (now hidden) select element. (NOTE: I've not included any styles. This is a bare-bones example of using a select replacement).
var SelectBox = {
init: function () {
if ($('select').length > 0) {
this.generateStyledSelectbox('custom-select');
};
},
generateStyledSelectbox: function (cssClass) {
// Contained within .each to isolate all instances of <select>
$('select').each(function(index) {
var $source = $(this),
selected = $source.find("option[selected]"),
options = $source.find('option'),
selindex = index;
// Append styleable pseudo-select element to doc
$source.after('<div id="result-' + index + '" class="' + cssClass + '"></div>');
// Construct select list in pseudo select element
$('#result-' + index).append('<dl id="activeValue-' + index + '" class="dropdown"></dl>');
$('#activeValue-' + index).append('<dt>' + selected.text() + '<span class="value">' + selected.val() + '</span></dt>');
$('#activeValue-' + index).append('<dd><ul></ul></dd>');
// Assign select values to pseudo-select lis items
options.each(function () {
$('#activeValue-'+ index + ' dd ul').append('<li class="select-menu-item">' + $(this).text() + '<span class="value">' + $(this).val() + '</span></li>');
});
$('.dropdown').each(function(index) {
$(this).find('dd ul li a').on('click', function(event) {
event.preventDefault();
var text = $(this).not('.value').html(),
$base = $('.custom-selectbox').eq(index);
$('.dropdown').eq(index).find('dt a').html(text);
$('.dropdown').eq(index).find('dd ul').hide();
$base.val($(this).find('span.value').html());
});
});
// prevent link actions in dropdown
$('.dropdown dt a').on('click', function (event) {
event.preventDefault();
});
// open/close
$(".dropdown").eq(index).find('dt a').on('click', function () {
$(".dropdown").eq(index).find('dd ul').toggle();
});
$(".dropdown").eq(index).find('dd ul li a').on('click', function () {
var text = $(this).html(),
newval = $(this).find('.value').html();
$(".dropdown").eq(index).find('dt a span').html(text);
$('select').eq(index).val(newval);
$(".dropdown").eq(index).find('dd ul').hide();
});
// Hide dropdown on outside click
$(document).on('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("dropdown")) {
$(".dropdown").eq(index).find('dd ul').hide();
}
// remove dropdown-open targetable class
if (!$clicked.parents().hasClass("dropdown-open")) {
$clicked.parents().removeClass('dropdown-open');
}
});
// Hide native select
$source.css('display', 'none');
// assign initial (default) value
var initialval = $source.find('option').eq(0).html();
$('#activeValue-'+index+' dt a').html(initialval);
}); // END .each
}
};
SelectBox.init();
Here's a fiddle http://jsfiddle.net/P6ZCn/ (again, without styles)
I want to fix the following issue in Firefox
When i try to select the text inside the textbox using double click on mouse its not selecting the text the cursor goes to the start of the text.Any ideas how to fix this?but this works fine in googlechrome
i tried the following from this http://www.iwebux.com/demos/ajax/ i this link when you try to edit the price column you cant select the value.Thank you.
my code:
$(document).ready(function () {
$('td.edit').click(function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
$(this).addClass('ajax');
$(this).html('<input id="editbox" size="' + $(this).text().length + '" type="text" value="' + $(this).text() + '">');
$('#editbox ').focus();
});
$('td.edit').keydown(function (event) {
arr = $(this).attr('class').split(" ");
if (event.which == 13) {
$.ajax({
type: "POST",
url: "supplierprice/config.php",
data: "value=" + $('.ajax input').val() + "&rowid=" + arr[2] + "&field=" + arr[1],
success: function (data) {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
}
});
}
});
$('#editbox').live('blur', function () {
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
});
Please use this code
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
}
You might want to use select() instead of focus().
I have modified your script a bit.
http://jsfiddle.net/dKn4W/
The problem is that the click event bubbles up from the #editbox input, so the $('#editbox ').focus(); is executed on every click, that prevent text selection.
Modify your code something like this
$('td.edit').click(function(e){
var $target = $(e.target);
if($target.is('#editbox')){
return;
}
///// rest of code
}
Try using .select() function. This is used to select the text in the editable input elements.
In your case, try adding the line
$('#editbox').select();
below the line
$('#editbox ').focus();
Hope this hepls.
You need to stop the click events from propagating from #editbox to your td.edit. Try adding this:
$("td.edit").on("click", "#editbox", function(e) { e.stopPropagation(); });