jQuery Click Ereignis CheckBox Geändert Ajax Call

Question

Ich habe drei Kontrollkästchen, die wer überprüft/deaktiviert Werte aus einem Modell. Ich benutze einen Ajax-Post auf Button-Click-Event, um Controller-Aktionen für jedes Checkbox-Changed-Event aufzurufen, um die DB zu aktualisieren.

Hier ist der Code für eine der Kontrollkästchen (abgesehen von der Auswahl ID, sie sind alle gleich):

$(document).ready(function() { 

    //document.getElementById('UpdateButton').onclick = function() { 
    $("UpdateButton").click = function() { 
     $('#NatAm').change(function() { 
      // if ($('#NatAm').is(':checked')) { 
      $.ajax({ 
       //url: '@Url.Action("NativeUpdate", "Transactions")', 
        url: '/Transactions/NativeUpdate', 
        //data: { isNativeUp: true }, 

        type: 'POST', 
        dataType: "json" 
       }); 
       //} 
      }); 

Edit (HTML/Code anzeigen):

@Html.CheckBox("NatAm", (bool)@ViewBag.NativeAm) 
<input name="UpdateButton" id="UpdateButton" type="submit" value="Update" style="margin-left: 15px; margin-top: 3px;" class="btn btn-success" /> 

I kann das nicht zur Arbeit bringen. Bevor der Button hinzugefügt wurde, funktionierte der Ajax Post gut. Danke für Ihre Hilfe!

Answer 1

Ihr Click-Handler stimmt nicht. Sie müssen die ID der Schaltfläche übergeben und den jQuery-Click-Handler verwenden. Sie müssen auch Nest nicht die Handler:

$(document).ready(function() { 
    $("#UpdateButton").click(update); 
    $('#NatAm').change(update); 
}); 

function update() { 
    $.ajax({ 
    url: '/Transactions/NativeUpdate', 
    type: 'POST', 
    dataType: 'json' 
    }); 
} 

JSFiddle Demo: https://jsfiddle.net/vLzwuwdo/

Answer 2

Sie sagen JQuery für 'Updatebutton' Tags zu suchen, die in Ihrem Fall nicht existiert. Sie vermissen die #, die eine ID in Ihrer Schaltfläche angibt.

Versuchen Sie, diese

$(document).ready(function() { 

//document.getElementById('UpdateButton').onclick = function() { 
$("#UpdateButton").click(function() { 
    $('#NatAm').change(function() { 
     // if ($('#NatAm').is(':checked')) { 
     $.ajax({ 
      //url: '@Url.Action("NativeUpdate", "Transactions")', 
       url: '/Transactions/NativeUpdate', 
       //data: { isNativeUp: true }, 

       type: 'POST', 
       dataType: "json" 
      }); 
      //} 
     })); 

Answer 3

1. id sollten in demselben Dokument (NatAm und UpdateButton) eindeutig sein, ersetzen Sie die doppelten diejenigen von globalen Klassen wird das erste Problem lösen.

2. Sie sollten nicht da jedes Mal Ereignis in einem anderes definieren Sie das ersten auslösen wird es neues Ereignis für das Element erstellen, jedes Mal in Ihrem Fall, dass Sie neues Änderungsereignis klicken, wird erstellt und mit NatAm auf das erste Elemente befestigt werden.

Hoffe, das hilft.