nicht Selektor innerhalb Elternelement

Question

Ich brauche console.log, wenn .overtitle angeklickt wird, aber das Kontrollkästchen innen ausgeschlossen. Wenn das Kontrollkästchen angeklickt ist, muss ich es nur aktivieren/deaktivieren, ohne console.log.

Dies ist, was ich versucht habe, aber es funktioniert nicht. Wenn Sie auf das Kontrollkästchen klicken, wird console.log ausgelöst.

$('.overtitle').not('.checkpart').click(function() { 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'> 
 
    <input class='checkpart' type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

Answer 1

Wenn Sie auf das Kontrollkästchen klicken klicken Sie immer auch auf der .overtitle. Eine Lösung hierfür ist in der Click-Ereignis zu prüfen event.target

$('.overtitle').click(function(event){ 
 
    if(event.target.className == 'checkpart') { 
 
     return; 
 
    } 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'> 
 
<input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

Answer 2

Theres ein paar Möglichkeiten, wie Sie dies tun können.

Zum einen könnte man die e.target Eigenschaft verwenden, um zu überprüfen, welches Element wurde tatsächlich angeklickt:

$('.overtitle').click(function(e) { 
 
    if (!$(e.target).is('.checkpart')) { 
 
    console.log('323'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

Alternativ Sie eine separate Ereignishandler auf das Kontrollkästchen platzieren können, die das Ereignis bis ausbreitende stoppt das DOM:

$('.overtitle').click(function(e) { 
 
    console.log('323'); 
 
}); 
 

 
$('.overtitle .checkpart').click(function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" value="banner00"> 
 
    BANNERS 
 
</div>

Schließlich könnten Sie den Text in einem label Elemente wickeln, und befestigen Sie nur das Ereignis, dass:

$('.overtitle label').click(function(e) { 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overtitle"> 
 
    <input class="checkpart" type="checkbox" name="part" id="part" value="banner00"> 
 
    <label for="part">BANNERS</label> 
 
</div>

Answer 3

Prevent Ereignis sprudelnde für das Kontrollkästchen, um den DOM-Baum oben mit event.stopPropagation() Methode.

$('.overtitle').click(function() { 
 
    console.log('323'); 
 
}).find('.checkpart').click(function(e) { 
 
    e.stopPropagation(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

---

bzw. überprüfen event.target Element (die das Ereignis fortgepflanzt) nicht das Kontrollkästchen.

$('.overtitle').click(function(e) { 
 
    if ($(e.target).is(':not(.checkpart)')) 
 
    console.log('323'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='overtitle'><input class='checkpart' type="checkbox" name="part" value="banner00">BANNERS</div>

Answer 4

Sie haben zwei Handler separate Veranstaltung für jeden schreiben wie

$(document).on('click','.overtitle',function(e) { 
    console.log('323'); 
}); 

$(document).on('click','.checkpart',function(e) { 
    e.stopPropagation(); 
}); 

Die stopPropagation() verhindert jede Event-Handler der Eltern Elemente dieses Elements ausgeführt werden