jQuery .click(function(){ not working

Question

<a class="click_' + module_row + '_' + element + '_on">Show</a>
<div class="div_' + module_row + '_' + element + '_show">div content</div>

$('.div_' + module_row + '_' + element + '_show').hide();   
$('.click_' + module_row + '_' + element + '_on').click(function(){ 
  $('.div_' + module_row + '_' + element + '_show')
    .fadeIn('slow')
    .show('slow') 
});

I trying to show dynamically a div content via JavaScript. But not working.

you code in fine you should check you `console` for `errors` — ozil, May 04 '15 at 13:34
class cannot be like his . You can add the class name using jquery — Sai Deepak, May 04 '15 at 13:35
This method of programming can be overly complicated to debug because, only you know the variable values, what if they are empty or there is whitespace character — Clain Dsilva, May 04 '15 at 13:38
http://stackoverflow.com/questions/30024897/jquery-select-val-not-working ... really? — Masiorama, May 04 '15 at 13:43

Arcagully · Accepted Answer · 2015-05-04T14:21:02.150

1

I'm guessing that you are adding it dynamically via JavaScript, if that is the case you should use:

$(document).on('click','.click_' + module_row + '_' + element + '_on',function () {        
    // hide here, that is simple
});

Edit 1) DO you have module_row and element defined? I'm thinking that is the problem. Tell us more about those selectors?

Edit 2) Since you told me that module_row and elements are numbers, you should use different syntax. Use php to put module_row and element in attribute. Code HTML:

<a class="div_show" data-module="module_row" data-element="element">div content</div>

Code JS:

$(document).on('click','.click_on',function (e) {        
    // not to reload the page        
    e.preventDefault(e);
    var module = $(this).attr('data-module');
    var element = $(this).attr('data-element');
    $('div_' + module + '_' + element + '_show').hide()
});

You might need to tweak it around little more, but thats it

edited May 04 '15 at 14:21

answered May 04 '15 at 13:33

Arcagully

364
1
3
13

Check 2 things, html in inspect element just to see how selector would look like. Second thing put console.log('work'); just to see if you have an event. My guess is that you dont have those variables defined globaly so you cannot have proper selection. Why do you put module_row and element? I think that there is more elegant solution than that – Arcagully May 04 '15 at 14:01
I working on php and this are example of a form which i create on php. – Foxpro May 04 '15 at 14:08
Yes `' + module_row + '_' + element + ' = 1_2` – Foxpro May 04 '15 at 14:11
Thank you. Awesome .I make a sense from your code : I just modify some code `Show
div content
` and `$(document).on('click','.click_on',function (e) { e.preventDefault(e); var elements = $(this).attr('title'); $('.div_' + elements + '_show').fadeOut('slow').hide('slow'); });` is it right code? but now working for me.You saved me.Thanks... – Foxpro May 04 '15 at 15:14

jQuery .click(function(){ not working

1 Answers1