jQuery selecting issue, how to select elements when event occurred?

Question

I have several buttons, by clicking on them depending on the state (true or false) stored in database, 0: using ajax changes value in db, 1:appears confirmation modal, if user confirms, then again using ajax value changes.

HTML:

<span class="1" data-state="{{ $subscribe->newsletter }}" data-type="1"></span>
<span class="2" data-state="{{ $subscribe->send_products }}" data-type="2"></span>
<span class="3" data-state="{{ $subscribe->send_shares}}" data-type="3"></span>

jQuery:

  var confirm_modal = $('#unsubscribe-confirmation');

  $('.1, .2, .3').click(function() {

     var button = $(this);
     var state = $(this).data('state');
     var type = $(this).data('type');

     if ( state == 1 ) {
        confirm_modal.modal();
     } else {
        $.ajax({
           'url': get_base_url_with_ajax_url() + 'subscribe',
           'data': { "state": state, "type" : type },
           'type': 'POST',
           'dataType': 'json',
           success: function(result) {
              button.attr('data-state', '1');
           }
        });
     }
  });
 confirm_modal.find('#confirm').click(function() {
     $.ajax({
        'url': get_base_url_with_ajax_url() + 'subscribe',
        'data': { "state": state, "type": type },
        'type': 'POST',
        'dataType': 'json',
        success: function(result) {
           $(this).attr('data-state', '0');
           confirm_modal.modal('hide');
        }
  });

So, in first statement, when changing data-state, selector $(this) is worked. But when appeares modal how can I select elements, which was taken at first: ".sbs-nwlttr, .sbs-evt, .sbs-prod"?

Thanks for attention.

why don't you make use of your `button` variable that stores `$(this)` already for you...? — benomatis, Oct 20 '14 at 08:50
because variable button initialized in if statement, and in event when clicking on modal button, it is undefined — lalexa, Oct 20 '14 at 08:54
not sure, but it looks like `confirm_modal.find('#confirm').click(function()` is inside `$('.sbs-nwlttr, .sbs-evt, .sbs-prod').click(function()` and it's not closed (no `}` at the end) - is that intentional? — benomatis, Oct 20 '14 at 08:56
i see you just edited your original post transforming the selectors into numbers, but that's not valid markup, so i'd change them back if i was you - more on this here: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-selectors — benomatis, Oct 20 '14 at 08:59
it's my mistake, event with modal-clicking is outside of clicking on span-elements — lalexa, Oct 20 '14 at 09:14

score 1 · Answer 1 · edited May 23 '17 at 11:49

First of all, though I suspect you only used it for testing, avoid using one digit class names, and ones that start with a number as that's not allowed in css (more details can be found on that in this questions), so rename class="1" to class="one" for example.

On the other the only problem you have is that your button variable is not global, only declared inside one of the functions. Declare it outside, then you can make use of it in the other function too as follows:

var button;

$('.one, .two, .three').click(function() {

    button = $(this);
    // ...
}

confirm_modal.find('#confirm').click(function() {

    alert(button.text()); // for example

}

I set up a fiddle that demonstrates this (slightly different from the above, but should show the behaviour clearly: http://jsfiddle.net/wz6v306k/

jQuery selecting issue, how to select elements when event occurred?

1 Answers1