Ich habe das Kontrollkästchen in der dynamisch generierten Zeile dynamisch generiert. Ich hänge den Listener für delegierte Ereignisse ('Klick') an die gesamte Zeile an.

Und alles funktioniert einwandfrei - ich schalte den Kontrollkästchenstatus um, indem ich auf eine beliebige Stelle in der Zeile klicke, außer auf eine Kleinigkeit - wenn ich auf das Kontrollkästchen selbst klicke, wird der Status nicht umgeschaltet.

Unten ist mein Beispielcode. Irgendwelche Ideen?

//Generate dynamically div row encompassing checkbox and label
$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);
//Attach delegated event listener to entire row
$('#wraper').on('click', '#row', function(){
	//Toggle checked attribute
	$('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;
  //Display checked status after click
	$('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
});
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="wraper"></div>
</body>
</html>
-2
user3307073 17 Jän. 2019 im 19:25

5 Antworten

Beste Antwort

Entfernen Sie, wie in den Kommentaren erwähnt, die click Logik aus Ihrem Code. Die Standard-HTML-Funktionalität wird sofort überschrieben. Wenn Sie das Kontrollkästchen auch dann aktivieren möchten, wenn auf die Beschriftung geklickt wird, können Sie das Attribut for verwenden und auf das Kontrollkästchen id verweisen:

Update : Wenn Sie das Kontrollkästchen an einer beliebigen Stelle des übergeordneten div aktivieren möchten, fügen Sie dem übergeordneten Element einen click - Handler hinzu. Wenn das Klickziel kein checkbox ist, erzwingen Sie das Aktivieren des Kontrollkästchens. Wenn das Ziel ein checkbox ist, tun Sie nichts.

$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);

$('#wraper').on('click', '#row', function(e) {
  /* If the clicked element is not a checkbox,
      then force the check via jquery
  */
  if (e.target.type !== 'checkbox') {
    $(this).find('input').prop('checked', !$(this).find('input').prop('checked'))
  }
    // Display checked status after click
  $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
  
});


$("#checkbox-test").change(function() {
  $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper"></div>
3
adiga 17 Jän. 2019 im 17:01

Ihr Hauptproblem besteht darin, dass beim Klicken auf checkbox das Ereignis in die Zeile übertragen wird. Dies ist also dasselbe, das zweimal auf das Kontrollkästchen geklickt hat. Die Lösung besteht darin, stopPropagation() des Ereignisses an das übergeordnete row zu senden, wenn das Kontrollkästchen aktiviert ist:

// Generate dynamically div row encompassing checkbox and label

$('#wraper').append(`
    <div id="row">
      <label>This is the checkbox</label>
      <input type="checkbox"></input>
    </div>
    <br>
    <span class="msg"></span>
`);

// Attach delegated event listener to entire row.

$('#wraper').on('click', '#row', function()
{
    // Toggle checked attribute.

    $('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;

    // Display checked status after click.

    $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
});

$('#wraper').on('click', 'input[type="checkbox"]', function(e)
{
    $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
    e.stopPropagation();
});
<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="wraper"></div>
</body>
</html>
0
Shidersz 17 Jän. 2019 im 16:37

Sie können das Kontrollkästchen einfach überspringen, wenn das angeklickte Element das Kontrollkästchen war.

//Generate dynamically div row encompassing checkbox and label
$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);
//Attach delegated event listener to entire row
$('#wraper').on('click', '#row', function(e) {
  var $checkbox = $('#row [type="checkbox"]').eq(0);
  
  //Toggle checked attribute
  if (!$checkbox.is(e.target)) {
    $checkbox.prop('checked', !$checkbox.prop('checked'));
  }
  
  //Display checked status after click
  $('#wraper .msg').text(`Checkbox status is ${$checkbox.prop('checked')}`);
});
<!doctype html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="wraper"></div>
</body>

</html>
1
Taplar 17 Jän. 2019 im 16:43

Hoppla! Mach dir keine Sorgen Freund. Einfacher Fehler: Sobald der Benutzer auf das Kontrollkästchen geklickt hat, wird standardmäßig das Kontrollkästchen aktiviert. Ihr Code hier führt diese "Überprüfungs" -Aktion ein zweites Mal aus. Sie aktivieren und deaktivieren das Kontrollkästchen also sofort!

Es gibt zwei mögliche Korrekturen für Sie. Entweder können Sie einfach das Aktivieren / Deaktivieren des Kontrollkästchens in Ihrem Code beenden, dh diese Zeile hier auskommentieren:

//$('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;

Sie können dies auch weiterhin tun, müssen jedoch die Standard-HTML-Aktion mithilfe der Funktion deaktivieren

`enter code here`event.preventDefault()

Leider konnte ich das mit jQuery nicht zum Laufen bringen ... Ich bin selbst nicht so gut darin versiert, aber ich bin sicher, dass jemand anderes unten kommentieren wird, wie das geht!

0
Joshua Richardson-Noyes 17 Jän. 2019 im 16:38

Der Grund dafür ist, dass Ihr Code das Kontrollkästchen sofort auf den vorherigen Status zurücksetzt, wenn Sie genau auf das Kontrollkästchen klicken. Sie können dies lösen, indem Sie das Attribut for auf Ihrem Etikett verwenden - und dann einfach ein change -Ereignis im Kontrollkästchen selbst verwenden:

Überarbeitetes HTML:

<div id="row">
    <label for="checkbox1">This is the checkbox</label>
    <input type="checkbox" id="checkbox1"></input>
</div>

JS aktualisiert:

$("#checkbox1").change(function() {
    $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
}).change(); //execute immediately so the text displays.
0
tymeJV 17 Jän. 2019 im 16:31