Remove attr isn't work - javascript

i have a script like accordion,
this my script
$(document).ready(function(){
$('.film').click(function(){
$('.film').attr('id','activeMenu');
$('#film').slideToggle();
});
$('#activeMenu').click(function(){
$('.film').removeAttr("id");
});
});
this is style of activeMenu when it clicked
.activeMenu{
background:#C9FF26;
}
if i click .film and click again , id=activeMenu isn't removed
anyone know this problem?
thanks

Your problem happens because at the time you call $('#activeMenu').click(...) the element you're targeting doesn't actually have that ID.
You could potentially use $(document).on('click', '#activeMenu', ...) (i.e. a delegated event handler) that will work even if #activeMenu doesn't yet exist but I can't help but feel that this would be the wrong solution. It's almost never necessary to dynamically add or remove an ID on an existing element. A proper solution would depend on exactly what it is you're trying to achieve.

You need to use .on method to register click event on #activeMenu
$('#activeMenu').on('click',function(){
$('.film').removeAttr("id");
});

Related

jQuery mousedown not working in chrome/safari

I'm using this piece of code to wrap a link around a (dynamically) created div, which works good so far in firefox, but not on safari/chrome and ie.
I already know that I should use pointer events, but I'm not sure how to achieve this, since I still need the ".on" event, because of the dynamically created div.
// Create a link around the ID
$(".psv-hud").on('mousedown', '#psv-marker-job1', function() {
$(this).wrap( "<a href='/psv-marker-job1/'></a>" );
});
Any ideas how I could solve this?
You need to specify an element that is already there when the DOM is created. In the parameters, you specify the elements you want to add the mousedown method. By simply assigning $('.enemy'), it will attach the method to those that are already present in the DOM.
$('body').on('mousedown', '.enemy', function(event) {
//attack code
}
Jquery on mousedown not working on dynamically generated elements
If this code don't work, .psv-hub isn't exist when mousedown event bind.
First, check change .psv-hub -> document.
$(".psv-hud").on('mousedown', '#psv-marker-job1', function() {
$(this).wrap( "<a href='/psv-marker-job1/'></a>" );
});
Show me the example page.

Why does $(this) works with .hover() but not with .ready()?

So, I am trying to get backstretch.js to work with multiple divs that is loaded from the db.
but I can't get a separate image for each div.
This works perfectly, when I hover the boxes, the background shows up, but I wan't it to be loaded as soon as the page loads.
$(".tournament-thumb").hover(
function(){
$(this).backstretch($(this).data("url"));
}
);
I have tried this with .ready() without any result this it doesn't seem to register "$(this)" ? :
$(".tournament-thumb").ready(
function(){
$(this).backstretch($(this).data("url"));
}
);
Here is the HTML:
<div class="tournament-thumb" data-url="images/image.jpg"></div>
Please help me... If there is any better way than this, please respond with that then :)
From the docs:
The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted
So you can only use $(document) for the ready() method.
possibly best solution is to bind the delegation to the document object like
$(document).on('hover','.tournament-thumb',function(){
$(this).backstretch($(this).data("url"));
});
Okay, I solved it with jQuery.each
$.each($(".tournament-thumb"), function() {
$(this).backstretch($(this).data("url"));
});

Why my edit button works only once even I use $('[isEditButton="true"]').on()?

Here is my code, and I has been really frustrating on identifying the problem.
I tried to use
$('[isEditButton="true"]').on('click', function(){ codes })
or
$('table tr td').on('click', '[isEditButton="true"]' , function(){ codes })
but both yield unexpected result, the edit button can only be clicked once.
I searched the Jquery doc and used the so-called Delegated events, however, still did not work, the edit button is clicked once, also the newly injected button cannot be automatically attached the click event.
My online code
http://jsfiddle.net/dennisboys/mAjmU/2/
Anyone can give me some pointers on what is going on. I am really crazy on this problem. Thanks in advance for any kind helpers! Really need you guys!
Your [isEditButton] elements are being dynamically appended, so you need to use on with a delegate handler, with that parent selector being available on DOM load. Your second example nearly fixed the problem, except the table tr td elements are being dynamically appended too. Try this:
$('#address_list').on('click', '[isEditButton="true"]', function() {
// rest of your code...
});
Updated fiddle
I did this
$(document).on('click', '[isEditButton="true"]', function() {})
Seemed to work fine.
http://jsfiddle.net/mAjmU/6/
why don't you use this
if (isset($_POST['isEditButton'])){
//do some codes
}
else{
//do this
}

jquery issue with on and live

I have the following code:
var $reviewButton = $('span.review_button');
$reviewButton
.live('click',
function(){
$('#add_reviews').show();
}
)
Later in the script, I use an AJAX call to load some content and another instance of $('span.review_button') enters the picture. I updated my code above to use '.live' because the click event was not working with the AJAX generated review button.
This code works, as the .live(click //) event works on both the static 'span.review_button' and the AJAX generated 'span.review_button'
I see however that .live is depracated so I have tried to follow the jquery documentations instructions by switching to '.on' but when I switch to the code below, I have the same problem I had before switching to '.live' in which the click function works with the original instance of 'span.review_button' but not on the AJAX generated instance:
var $reviewButton = $('span.review_button');
$reviewButton
.on('click',
function(){
$('#add_reviews').show();
}
)
Suggestions?
The correct syntax for event delegation is:
$("body").on("click", "span.review_button", function() {
$("#add_reviews").show();
});
Here instead of body you may use any static parent element of "span.review_button".
Attention! As discussed in the comments, you should use string value as a second argument of on() method in delegated events approach, but not a jQuery object.
This is because you need to use the delegation version of on().
$("#parentElement").on('click', '.child', function(){});
#parentElement must exist in the DOM at the time you bind the event.
The event will bubble up the DOM tree, and once it reaches #parentElement, it is checked for it's origin, and if it matches .child, executes the function.
So, with this in mind, it's best to bind the event to the closest parent element existing in the DOM at time of binding - for best performance.
Set your first selector (in this case, div.content) as the parent container that contains the clicked buttons as well as any DOM that will come in using AJAX. If you have to change the entire page for some reason, it can even be change to "body", but you want to try and make the selector as efficient as possible, so narrow it down to the closest parent DOM element that won't change.
Secondly, you want to apply the click action to span.review_button, so that is reflected in the code below.
// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
$('#add_reviews').show();
});

How to bind to all click events, check for an attribute.... Efficiently?

I want to create a binding that captures all click events. And then if the item clicked has a "data-track" attribute do something...
What is the efficient way to do this? Can I bind at the body and let all the events bubble up. Any suggestions on how and how to do this efficiently?
Thanks
You should aim for simplicity over performance: Let jQuery do the work for you, and assume that the jQuery devs are better at optimizing JS than you unless you can prove otherwise.
Use the has attribute jQuery selector to setup a live click handler for all elements with the data-track attribute:
$('[data-track]').live('click', function () {
});
Attach click event handler at the document level using delegate with attribute selector [data-track].
$(document).delegate('[data-track]', 'click', function(){
//Do something here
});
Why don't you bind click events to ONLY items with a data-track attribute?
$('[data-track]').click(function() {
var data_track = $(this).attr('data-track');
//code here
});
I would go like this:
$('*[data-track]').click(function(ev){
// do something
});
or (if some such content coming from Ajax)
$('*[data-track]').live('click', function(ev){
// do something
});
Do you have to capture all click events? If you're only doing something if it has a "data-track" attribute, I believe you should be able to do:
$("*[data-track]").click(function(){//do something});
I'm not sure how that compares to other methods though for efficiency, although I think that since jQuery captures all events at the window level, it shouldn't make a difference.

Categories