CODEWITHSUNDEEP
jquery
Mamadum
Mamadum

Reputation: 540

calling jquery function onclick event

Probably beginner jquery question... Here is my problem:

I have dynamically created list of div elements. Each has its' specific content, id and a toggle icon in the corner. When I press toggle icon it causes the following: expands/hides the content of the div and changes the icon.

My initial thinking was to call 2 custom jquery functions something like this (the number is dynamically inserted by PHP):

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" href="javascript:void(0);" onclick="togglemydiv(content152); changeicon(icon152)">
    <div id="icon152">someicon</div>
  </a>
</div>

Now this works in some browsers but obviously it is not how it should be done as it doesn't work in FF in windows or in fiddle. Any help would be appreciated.

Upvotes: 2

Views: 6116

Answers (4)

Goran Obradovic
Goran Obradovic

Reputation: 9051

I suggest that you don't hardcode your ids into js.

Here is a suggestion how to do it simpler:

html:

<div id="div152" >
  <div id="content152">some content</div>
  <a id="toggle-icon152" data-bind-action="toggle-content" href="#">
    <div id="icon152">someicon</div>
  </a>
</div>​

js:

$("a[data-bind-action='toggle-content']").click(toggleContent);

function toggleContent(){
    var a = $(this);
    var div = a.prev();
    div.toggle();
    e.preventDefault();
    return false;
}

Se how it works on jsfiddle.

Here is version which does not assume your content is prev element to a, but you add attribute to your link so it knows what to toggle: http://jsfiddle.net/PrmX5/4/

I have added html5 data- attribute to identify anchor to which toggle function needs to be attached from js, you can do this different, of course, using class or other (faster?) jQuery selector.

As @coosal said in its answer, if divs are dynamically generated (ajax or on client), you need to use live instead of binding on document.ready, so here is version which uses live: http://jsfiddle.net/PrmX5/5/

Upvotes: 4

kushalbhaktajoshi
kushalbhaktajoshi

Reputation: 4678

As the divs are dynamically generated, we need live() function to trigger any event . . Check live() function of jquery

jQuery("#toggle-icon152").live("click",function(){
togglemydiv("content152");
changeicon("icon152");
})

Upvotes: 2

Stephen
Stephen

Reputation: 3432

Assuming you've written togglemydiv somewhere and it takes an id as its parameter, you'd need to put 'content152' in quotation marks - otherwise its trying to pass an object that doesn't exist into your function (it probally is coming through as type undefined)

As alex suggested above, you should separate your javascript from your HTML tags - its best practice..

Upvotes: 0

alexndm
alexndm

Reputation: 2929

I would recommend use external script instead of inline JS

$('#toggle-icon152').on('click', function(e){ 
   $('#content152').toggle();  // or do something else
   e.preventDefault();
}

reference http://api.jquery.com/toggle/

Upvotes: 3

Related Questions