Dynamic change .click value Jquery IE issue.

Question

Hello guys.. it's i first time i'm asking here. Sorry if the answer is available already.

I have a very small jQuery script that canges the paramether for onclick attr on a DIV.

IT works like as right and left arrows for some content in the middle.

Basically i set the onclick="foo(1)" then when get clicked sld change the value 1 to 2, and keep changing everytime i click.

on jQuery functio i'm using:

$("#v_arrow_r").attr('onclick','').unbind().click(newclick_next);

it works like a charm on FF and Chrome, but does not work on IE !!!! Argh...

here the the code:

if (start == 24) {
 var a = 0;
 var b = 0;
} else {
 var a = start-6;
 var b = start+6;
}

next = "home_featured_videos(" + b + ");"; 
newclick_next = eval("(function(){"+next+"});");

prev = "home_featured_videos(" + a + ");";
newclick_prev = eval("(function(){"+prev+"});");

$('#video-module').css('background','');
$('#video-module').html(response);

$("#v_arrow_l").attr('onclick','').unbind().click(newclick_prev);
$("#v_arrow_r").attr('onclick','').unbind().click(newclick_next);

The html:

<div id="videos-home">
  <div class="arrow-l" id="v_arrow_l" onclick="home_featured_videos(0);"></div>
  <div class="content" id="video-module">
   //CONTENT
  </div>
  <div class="arrow-r" id="v_arrow_r" onclick="home_featured_videos(6);"></div>
  <div class="clear_b"></div>
</div>

So like i said.. i define the attr onclick when page open. It work well on IE. but when i click the arrow and call the function the oncli is set to null and i add the function to .click. IE stop working. the click is dead.

If anybody have idea why this is happening.

Thanx in advance. Kind Regards

Varois

Answer 1

jQuery stands for obustrive javascript, you shouldn't mix onclick= attributes with event handlers.

$("#v_arrow_l").bind('click', function(e){
   // click event handler code
});

$("#v_arrow_l").unbind('click');  // remove event handler

Kind Regards

--Andy

Answer 2

$("#v_arrow_r").attr('onclick','').

Don't use attr to set event handler attributes. It doesn't work in IE and it's ugly and inefficient everywhere. If you're using jQuery, use the methods jQuery gives you for event binding, such as click().

Inline event handler attributes are an old-school hack you should generally avoid anyway.

next = "home_featured_videos(" + b + ");"; 
newclick_next = eval("(function(){"+next+"});");

You should almost never use eval, and you certainly don't want to assign a new handler function every time there's a click. Store the current state in a variable and read it from the handler. For example:

<div id="videos-home">
    <div class="arrow-l" id="v_arrow_l""></div>
    <div class="content" id="video-module">
        //CONTENT
    </div>
    <div class="arrow-r" id="v_arrow_r"></div>
    <div class="clear_b"></div>
</div>
<script type="text/javascript">

    var pagei= 0; // initial page number
    var pagen= 4; // 4 pages (of 6 items each)

    $('#v_arrow_l').click(function() {
        turnpage(-1);
    });
    $('#v_arrow_r').click(function() {
        turnpage(1);
    });

    function turnpage(d) {
        pagei= (pagei+pagen+d)%pagen;
        $('#video-module').css('background','');
        $('#video-module').html('Page '+pagei); // or load() some AJAX or whatever
    }

</script>