Question

我有Button并通过javascript

更改了ID

以下是代码：

 //unlock inputs and change button
function updateAppointment() {
    $('#doctor').prop('readonly', false);
    $('#findingareavalue').prop('readonly', false);
    $('#noticevalue').prop('readonly', false);
    $('#findingcontent').prop('readonly', false);
    $('#procedurecontent').prop('readonly', false);
    $('#editapp').text('Save');
    $('#editapp').attr('id', 'saveappointment');
}

之后我尝试按saveappointment按钮运行功能。

以下是代码：

$('#saveappointment').click(function () {
    alert();
    saveUpdatedAppointment();
});
 function saveUpdatedAppointment() {
    var model = {
        doctorname: $('#doctor').val(),
        findingareavalue: $('#findingareavalue').val(),
        noticevalue: $('#noticevalue').val(),
        findingcontent: $('#findingcontent').val(),
        procedurecontent: $('#procedurecontent').val(),
        appId: parseInt($('#appointmentId').text())

    }
    $.ajax({
        url: '@Url.Action("UpdateApp", "PatientDatabase")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function (data) {
            $('#saveappointment').text('Edit');
            $('#saveappointment').attr('id', 'editapp');
        }
    });
}

但是代码没有运行。我在开发控制台中没有错误。按钮ID正在变化。

 $('#editapp').click(function () {
     updateAppointment();
});
 function updateAppointment() {
    $('#editapp').text('Save');
    $('#editapp').attr('id', 'saveappointment');
}

$('#saveappointment').click(function () {
    alert();
    saveUpdatedAppointment();
});
 function saveUpdatedAppointment() {
 $('#saveappointment').text('Edit');
 $('#saveappointment').attr('id', 'editapp');
 $( "#editapp").off("click"); // unbind the click from the button
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id ="editapp">
Edit
</button>

可能有什么问题？

Answer 1

问题是当您为saveappointment注册点击事件时，此元素此时仍未退出。因此，在更改为新ID后，您需要为此元素注册事件。

$('#editapp').click(function() {
        updateAppointment();
    });
function saveAppointment() {
alert();
}

function updateAppointment() {
      $('#editapp').text('Save');
    $('#editapp').attr('id', 'saveappointment');
        $('#saveappointment').unbind('click').click(saveAppointment);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id ="editapp">
Edit
</button>

Answer 2

请尝试将处理程序更改为：

$(document).on('click', '#saveappointment', function () {
    alert();
    saveUpdatedAppointment();
});

（来源：https://stackoverflow.com/a/30000422/9104335）

Answer 3

当你将一个事件绑定到一个元素时，jQuery将该事件绑定到该元素，无论元素的id发生了什么，事件都会重新发送，你需要使用{{3}取消绑定它}

＆＃13;

	function updateAppointment() {
    $('#doctor').prop('readonly', false);
    $('#findingareavalue').prop('readonly', false);
    $('#noticevalue').prop('readonly', false);
    $('#findingcontent').prop('readonly', false);
    $('#procedurecontent').prop('readonly', false);
    $('#editapp').text('Save');
    $('#editapp').attr('id', 'saveappointment');
}

$('#saveappointment').click(function () {
    alert();
    saveUpdatedAppointment();
});
 function saveUpdatedAppointment() {
    var model = {
        doctorname: $('#doctor').val(),
        findingareavalue: $('#findingareavalue').val(),
        noticevalue: $('#noticevalue').val(),
        findingcontent: $('#findingcontent').val(),
        procedurecontent: $('#procedurecontent').val(),
        appId: parseInt($('#appointmentId').text())

    }
    // remove ajax code
 $('#saveappointment').text('Edit');
 $('#saveappointment').attr('id', 'editapp');
 $( "#editapp").off("click"); // unbind the click from the button
 $( "#editapp" ).bind( "click", function(){
     alert("new bind");
 } );
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="saveappointment"> save app</button>

＆＃13;

Answer 4

＆＃13;

 $('#editapp').click(function () {
    alert();
    saveUpdatedAppointment();
});
 function updateAppointment() {
    $('#editapp').text('Save');
    $('#editapp').attr('id', 'saveappointment');
}

$('#saveappointment').click(function () {
    alert();
    saveUpdatedAppointment();
});
 function saveUpdatedAppointment() {
 $('#saveappointment').text('Edit');
 $('#saveappointment').attr('id', 'editapp');
 $( "#editapp").off("click"); // unbind the click from the button
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id ="editapp">
Edit
</button>

＆＃13;

const action_text_save = "save";
const action_text_edit = "edit";
$('#actionApp').click(function () {
     if($(this).hasClass(action_text_edit)) {
       updateAppointment();
     } else {
       saveAppointment();
     }
     switchAction();
});

function switchAction() {
var actionBtn = $('#actionApp');
  if (actionBtn.hasClass(action_text_edit)) {
    actionBtn.removeClass(action_text_edit);
    actionBtn.text(action_text_save);
    actionBtn.addClass(action_text_save);
  } else {
    actionBtn.removeClass(action_text_save);
    actionBtn.text(action_text_edit);
    actionBtn.addClass(action_text_edit);
  }
}


function saveAppointment() {
  alert("appointment is saved");
}

function updateAppointment() {
 alert("appointment is updated");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id ="actionApp" class="edit">
Edit
</button>

＆＃13;

id更改（JS）后按钮单击不运行功能

4 个答案: