CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Neeraj Walia
Neeraj Walia

Reputation: 228

Jquery - Stop Event of Other Class

This is what I want

Jquery:

        $("body").on('click','.js-validate-url',function(){
            var url = $(".url").val();
           if(url==""){
              // STOP WORKING OF .js-loader click
             // I want if url is empty it should not alert
           }else{
             //OK
             // and here it should work fine
             // it should alert
           }
        });
         $("body").on('click','.js-loader',function(){
         alert();
        });

HTML
<form>
<input class="url">
<button class="js-loader js-validate-url"></button>
</form>
<form>
<button class="js-loader"></button>
</form>

Why I am doing this

  1. Upper class is different for all buttons
  2. But loader class is same for all buttons it shows loader inside clicked button

I found

e.stopPopagation();

But that works if I use it in loader click callback But I want to stop when button is clicked and url is empty

Cannot check url=="" inside loader click call back cause it is same for all button i dont want to check on other buttons click too so checking for single button

Upvotes: 1

Views: 117

Answers (4)

Patharraj
Patharraj

Reputation: 51

$("body").on('click','.js-loader',function(){
    if($(this).hasClass('js-loader js-validate-url')){
        alert();
    } else {
         if(url==""){
         } else {

         }
    }
});

Upvotes: 0

Neeraj Walia
Neeraj Walia

Reputation: 228

This is what I did and is working fine as per my requirement

     $("body").on('click','.js-validate-url',function(){
        var url = $(".url").val();
       if(url==""){
          // STOP WORKING OF .js-loader click
         // I want if url is empty it should not alert
       }else{
         $(this).removeClass("js-diable");
         //OK
         // and here it should work fine
         // it should alert
       }
    });


     $("body").on('click','.js-loader',function(){
     if($(this).hasClass('js-scud-disabled')){
         //NOTHING TO DO
     }else{
         alert();
     }
    });

HTML

    <form>
      <input class="url">
      <button class="js-loader js-validate-url js-disable"></button>
    </form>

    <form>
      <button class="js-loader"></button>
    </form>

Upvotes: 1

Mustkeem K
Mustkeem K

Reputation: 8848

I would recommend using classes to check for condition.

    $("body").on('click','.js-loader',function(){
            var _this = $(this)
           if(_this.hasClass('js-loader') && _this.hasClass('js-validate-url')){
             
             // if both classes js-loader, js-validate-url are present on button
             alert()
             
           }else{
            
            alert("js-loader") // if only js-loader present on button
            
           }
        });

Upvotes: 2

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

I'm not sure if I understand what you are trying to do, but I guess you can merge your events into a single one and use an external function only when it met a condition.

You could also use removeEventListener but I don't believe you need it for your problem.

var myFunction = function(){
  alert('loader');
};

$("body").on('click','.js-validate-url',function(){
  var url = $(".url").val();
  if (url){ alert('validate: '+url); }
  else myFunction();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" value="google.com" class="url"/>

<button class="js-validate-url js-loader">Bt1</button>

<button class="js-loader">Bt2</button>

Upvotes: 1

Related Questions