Multiple jquery Selectors

Question

Thanks to karim79 i am able to click on the ImageButton and apply the Jquery highlight effect to a different div

$("#btnFavorite").click(function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});

Now i would like to extend the question as follows.

I add the ImageButtons to the webpage dynamically, and i would like to apply the effect on the div for every ImageButton click.

     <asp:ListView ID="ListView1" runat="server">
        <layouttemplate>
            <asp:PlaceHolder id="itemPlaceholder" runat="server" />
        </layouttemplate>
        <ItemTemplate> 
        <asp:ImageButton ID="btnFavorite" runat="server" ImageUrl="~/Images/Favorite.png"/>
        </ItemTemplate>
    </asp:ListView>

What should i do in that case? By using ItemDataBound of the listview and adding attributes like

btnFavorite.Attributes.Add("onmouseclick", "doSomething") or what?

I am totally lost!

Answer 1

Simply add an attribute named class to the ImageButtons you want to have this effect maker function, and value it with a name, for example effectMaker. Then call the same function, but change the selector to

$(".effectMaker").click(function() {
    // selector for element to highlight
    $("#theDiv").effect("highlight", {}, 3000);
});

With the . selector followed by a stringValue, you reference every element that has a class valued with that stringValue.

Answer 2

You could try a more generic selector like this...

$("input[type='image']").click(function(){
    $(".. related div selector ..").effect("highlight", {}, 3000);
});

I don't know the relationship between the div and the input so I can't assume what the selector is but if you post the relationship or explain it we can help you write a more accurate selector.

It should be worth noting that if you are dynamically added the ImageButtons to the page after the DOM has loaded and not on the server side then you would likely want to use the live method for attaching events...

$("input[type='image']").live('click', function(){
    $(".. related div selector ..").effect("highlight", {}, 3000);
});

Answer 3

Some say the delegate function is better than the live function:

http://test.kingdesk.com/jquery/bind_live_delegate.php

Answer 4

I don't know if this will work for you, but what I've done is this:

$("#<%= ListView1.ClientID %>").find(".ImageButtonTarget").click(function() {
   ..
});

I give my button control a unique class to find it with, and parse the entire list view in bulk. I'm not sure if there is one or many divs, but if the div is in the listview row, you can also use a combination of parents and find to grab that from the ListView row too.

This also keeps the scoping to within the ListVIew; the selector doesn't have to parse the entire page to find the image buttons, only within the list.

HTH.

Answer 5

This will apply effect() on every input of type 'image' within the 'theDiv' container:

$('#theDiv').find('input[type="image"]').effect('highlight', {}, 3000);

Or, this will apply it to 'theDiv' on every input type image click:

$('input[type="image"]').click(function() {
  $('#theDiv').effect('highlight', {}, 3000);
});

Not sure which one you're trying to do.