CODEWITHSUNDEEP
javascriptjquery
user1725382
user1725382

Reputation: 8532

Binding One Click Event to three different links

I wrote a simple script similar to this example. The problem is the click event is only binding to the first #id in the conditional statement. My thought on why this is occurring is there is nothing in each statement to associate the ID with the class in the click function, but when I tried to add a var, the click did not fire at all. Please tell me where I have gone wrong. Thanks

$(document).ready(function(){
        $('.someclass').bind('click', function() {
          if('#id1')
          {
            window.location = "someURL";
          }
          else if('#id2')
          {
             window.location = "someURL2";
          }
          else if('#id3')
          {
              window.location = "someURL3";
          }
            });
    });

Upvotes: 0

Views: 234

Answers (5)

superachu
superachu

Reputation: 821

If my understanding is correct for your requirement, you have a css class called "someclass" which has hyperlinks into it. You need to set the URL of those hyperlinks dynamically through jQuery, am I correct? If so, then you can try the following code:

<script type="text/javascript" src="../Scripts/jQuery/jquery-1.7.2.js"></script>
<script type="text/ecmascript">
    $(document).ready(function () {

        $(".someclass > a").live("click", function () {
            var currentID = $(this).attr("id");
            if (currentID == "id1") {
                window.location = "http://google.com";
            }
            else if (currentID == "id2") {
                window.location = "http://stackoverflow.com";
            }
            else if (currentID == "id3") {
                window.location = "http://jquery.com";
            }
        });
    });

</script>

<div>
    <div class="someclass">
        <a id="id1">id 1</a>
        <a id="id2">id 2</a>
        <a id="id3">id 3</a>

    </div>
</div>

Upvotes: 0

King Friday
King Friday

Reputation: 26076

I think you are over thinking things and also not knowing what is out there for you to use. I would leverage the data attribute on your links. I'm going to assume they are not your typical A tag with an HREF because you should not use JavaScript if so.

<div data-url="http://www.someurl1.com">...</div>
<div data-url="http://www.someurl2.com">...</div>
<div data-url="http://www.someurl3.com">...</div>

<script>
    $('body').on('click','div[data-url]', function(ev) {
        ev.preventDefault();
        window.location = $(this).data('url');
    }
</script>

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 185873

Consider:

<span data-url="someURL">Link 1</span>
<span data-url="someURL2">Link 2</span>

And then:

$wrapper.on( 'click', 'span', function () {
    window.location = $( this ).data( 'url' );
});

where $wrapper contains the DOM element which in turn contains all your "links".

The idea here is to separate the data from the JavaScript code (= the behavior). Your URL's should be in the DOM - you can use data-* attributes to store them (as I've shown above).

Upvotes: 2

Jashwant
Jashwant

Reputation: 28995

You can check their id's like this

$(document).ready(function () {
    $('.someclass').bind('click', function () {
        if(this.id === 'id1') {
            window.location = "someURL";
        } else if(this.id === 'id2') {
            window.location = "someURL2";
        } else if(this.id === 'id3') {
            window.location = "someURL3";
        }
    });
});

Upvotes: 3

Horen
Horen

Reputation: 11382

Since you already use ids for your elements you should use them seperately to bind the click functions. It's easier and it works :)

$(document).ready(function(){
    $('#id1').click(function(){
        window.location = "someURL";
     });
    $('#id2').click(function(){
        window.location = "someURL2";
     });
    $('#id3').click(function(){
        window.location = "someURL3";
     });
});

If you like the original way better (you shouldn't ;-) ) then try this:

      if( $(this).attr("id") == 'id1' )
      {
        window.location = "someURL";
      }

Upvotes: 0

Related Questions