jquery live context - javascript

I'd like to do a live function on a selector, but i want to add a context depending on this selector.
I know that's wrong but what could be correct to make that right:
$('.myClass',$(this).parent()).live('myEvent',function(){..})
.myClass is a duplicated element class. And this 'live' make me possible to limit the event only in the context, in fact selector parent.
I hope I'm understandable.

It looks like what you're looking for is the .delegate() function, which is just like .live(), but allows for a context (sort of), along with other benefits.
Try this code:
$(this).parent().delegate('.myClass','myEvent',function() { .. } );

Try this
$(document).on(".myClass","event",function(){
var select = $(this).parent();
//use select for further implentation as selecter
})

Related

jQuery if data-id element hasClass not working

I don't know if the function i am trying to create is missing an element or if I am missing something but my function isn't working at all. Not sure if am missing something or if i am not adding something. let me know I provided jQuery and screenshot of the code i am trying to get to work. Basically what i am trying to do is if a certain element that has a data-id has a certain class then hide certain list-items.
$(function($){
if( $('.chbs-vehicle[data-id="313"] a').hasClass('chbs-state-selected') ){
$('ul.chbs-list-reset li(1)').hide();
}
});
li(1) isn't a valid expression and you should use a different evaluator:
$('ul.chbs-list-reset li:eq(0)')
$('ul.chbs-list-reset li:first-child')
$('ul.chbs-list-reset li').eq(0)
Take a look at this Demo
If your condition is met on page load, it works just fine. However, if the chbs-state-selected class is added dynamically, you need to listen for that change with an event handler. Your script as you have it doesn't constantly poll the document to see if Vehicle 313's a has the class.
Based on your comment, it sounds like you need to listen for that same click event that adds the chbs-state-selected class. Check out this rudimentary Demo.
Given this, you don't necessarily need to check for the class, just attach the hide/show functions to the same event. However, if necessary you can add the hasClass check to it.
Regardless, it should be inside that same handler that adds the chbs-state-selected in the first place
You can use eq: jquery function
$(function($){
if( $('.chbs-vehicle[data-id="313"] a').hasClass('chbs-state-selected') ){
$('ul.chbs-list-reset li:eq(0)').hide();
}
});

Jquery each replace innerHtml

Jquery
I am trying to change the inner text on multiple td element which I believe should look something like this although this does not appear to be a jquery object when I am debugging (I could be wrong).
What is the correct way this should be done?
$('.leg-number').each(function () {
this.html('foo');
});
Maybe try this instead:
$('.leg-number').html('foo');
which is a shorter and more efficient way to achieve your goal. It is just asking jQuery to set the inner html of every element with class "leg-number" to "foo" without any explicit iteration. Most of the jQuery methods like .html() can work on sets of elements so you don't really need to use .each() for simple cases like this.
Now on why your version didn't work: Using .each() would work if you wrapped this with the jQuery function $() so you could use the jQuery methods on it:
$('.leg-number').each(function () {
$(this).html('foo');
});
The variable this inside of the .each() callback is a DOM element and you need $(this) to convert it into a jQuery object that wraps this element. See the explanation in the answer by epascarello who explained it before I updated my answer.
Read the docs for each(). this is a DOM Html Element node, not a jQuery object reference. You can either convert it back to jQuery or use innerHTML directly.
$(this).html('foo');
or
this.innerHTML = 'foo';
The docs show using $(this) in the examples.
Change:
this.html('foo');
to:
$(this).html('foo');
You're attempting to use a jQuery method on a non-jQuery object. This of course assumes that your table cells have the class .leg-number.

Is it possible to select $(this) AND use selectors in jQuery

I'm wondering if I can use $(this) as well as a class selector before running a function on them.
So rather than doing;
$(this).toggleClass('open');
$('.closed').toggleClass('open');
Do something more like;
$(this, '.closed').toggleClass('open');
Whereas really, the above will select 'this' within the context of '.closed'
Regards,
You can use add():
$(".closed").add(this).toggleClass("open");
It will add this element to the set of matched elements (i.e. .closed).

What if I don't declare an ID in <div>?

How can I access any <div> if I don't declare the id attribute. Does DOM create ID itself?
e.g.
<div class="common_class" onmouseover="know_your_div(this)">
</div>
<script type="text/script">
function know_your_div(obj){
/*
Here i want to access the div object not by class because of it's common
for all div
*/
}
</script>
Well, the answer to your question is right there in your code.
The obj parameter that your know_your_div function takes is supplied as this in the onmouseover attribute. Thus, that is your div.
There's not an easy way to get to it in all browsers. Your best bet is to just create an ID on it. Is there a reason you can't?
Short of that, you have to navigate to it using DOM traversal methods, which are horribly unstable if your DOM structure changes at all. Code like:
document.body.childNodes[3].childNodes[2].childNodes[4];
or
document.getElementsByTagName('DIV')[22]; // 23rd DIV in the page
etc...
The answer is in your Question, let me try to help you
<div class="common_class" onmouseover="know_your_div(this)"> </div>
var oldObject = "";
function know_your_div(obj) {
// write ur condition if/ese/while/..
obj.parentNode.do_Something(); OR obj.parentNode.ID/Class/value
oldObject = obj;
}
then I guess you need to specify the ID explicitly alongside the class name..DOM won't create the ID itself...
Then it's time to use the DOM. Maybe you could use things like firstChild, lastChild, nextSibling.. http://de.selfhtml.org/javascript/objekte/node.htm
If you're using a JS library, like MooTools or jQuery, which I reccomend, you'll have a lot of powerful selector magic at your hands (example http://mootools.net/demos/?demo=Slick.Finder).
Why not use JQuery and selectors?
http://api.jquery.com/id-selector/
No, the DOM does not create an ID. You need to add an ID. You can use jQuery to access a div by it's class.

How to call mouse over function on dyanamic divs

I have dynamic divs as rows:
<table border=1><tr><td>
<div id='div1'>fgg</div>
<div id='div2'>dfgdfg</div>
<div id='div3'>vcbcvb</div>
<div id='div4'>sdfsdf</div>
</td></tr></table>
How can I call jQuery function on mouseover of each div?
These divs are dynamic, can vary the number.
$("td div").live("mouseover", function() {
//mouseover code here
});
I suggest using a class for your divs, and using a selector: $(".rows") or similar. However, the above will work for the markup you've given.
If you must use id, this will allow you to add it by id. Keep in mind that as you add new items, you will have to run this code for the id (defeating the dynamic part of your original question).
$("#mydivid").mouseover(function() {
//mouseover code here
});
which you could utilize in a list like so:
var divs = ["mydiv1", "mydiv2", "mydiv3"];
$(divs).each(function() {
$("#" + this).mouseover(function() {
//mouseover code here
});
});
This is really a bad approach, I strongly suggest using a class instead.
Use event delegation, either .live() or .delegate() to bind events to elements that are created dynamically.
one another easy way is to give the same class name to all the divs.
you can hook the click event by class name instead of id.In the code you can also refer the current div block by using "this" keyword
Unless there is some reason you specifically cannot use a repeating class name for each div, the live() method is the way to go. Using a class would be much more efficient, however.

Categories