[英]JQuery - How to listen an ID changed button and reset its prop after loaded
I have a submit button for a textarea in a modal, and this button set to disabled if the textarea is empty.我有一个模式中文本区域的提交按钮,如果文本区域为空,则此按钮设置为禁用。 The code is:
代码是:
function textAreaListener() {
if (!($(#text-area).val().trim())) {
$('#submit-button').prop({ disabled: true });
} else {
$('#submit-button').prop({ disabled: false });
}
}
It works well.它运作良好。
After that, I wrote another method to call the modal, and I need to change the button's id so that the original click event will not happen, I used $('#submit-button').attr('id','batch-submit-button');
之后,我写了另一个调用模态的方法,我需要改变按钮的id,这样原来的点击事件就不会发生,我用
$('#submit-button').attr('id','batch-submit-button');
to change button's id, and changed the function above to:更改按钮的 id,并将上面的 function 更改为:
function textAreaListener() {
if (!($(#text-area).val().trim())) {
$('#submit-button').prop({ disabled: true });
$('#batch-submit-button').prop({ disabled: true });
} else {
$('#submit-button').prop({ disabled: false });
$('#batch-submit-button').prop({ disabled: false });
}
}
And then the prop({ disabled: false })
is not working for the button with new id ( #batch-submit-button
), but the older button with old id works well.然后
prop({ disabled: false })
不适用于具有新 id ( #batch-submit-button
) 的按钮,但具有旧 id 的旧按钮运行良好。 I looked couple question in StackOverflow and I think the reason is JQuery can't capture the new id after loaded.我在 StackOverflow 中查看了几个问题,我认为原因是 JQuery 在加载后无法捕获新 ID。 Is there any way to solve it?
有什么办法解决吗? Thank you!
谢谢!
------------------Here's my haml file------------------------------ ------------------这是我的 haml 文件---------------------------- --
#state-modal.modal
.modal-dialog
.modal-content
.modal-header
%h5#state-modal-title.modal-title
.modal-body
= form_for :proposal, url: '#', html: {id: 'state-modal-form'} do |form|
= form.text_area :comment, id: 'text-area', |
placeholder: t('.comment'), class: 'form-control', rows: 5
.modal-footer
%button.btn.btn-default{id: 'cancel-button', data: {dismiss: 'modal'}}= t('.cancel')
%button.btn.btn-primary{id: 'submit-button'}= t('.done')
The exact case is:具体情况是:
$(function () {
function initState() {
$('#state-modal-form').attr('action', '#');
$('#state-modal-form textarea').val('').hide();
$('#submit-button').prop({ disabled: true });
}
function assignHandlersToElements() {
$(document).on('click', '.commentable-element', App.books.bookCommentableElementHandler);
$(document).on('keyup', '#state-modal-form textarea', App.books.textAreaListener);
$(document).on('click', '#cancel-button', App.books.initState);
$(document).on('click', '#submit-button', App.books.submitHandler);
}
function bookCommentableElementHandler(event) {
event.preventDefault();
if(event.target.id == 'selected-button'){
$('#submit-button').attr('id','batch-submit-button');
$('#text-area').show();
$('#batch-submit-button').prop({ disabled: true });
}else{
$('#state-modal-form').attr('action', $(this).data('url'));
$('#text-area').attr('placeholder', 'Comment').show();
$('#text-area').show()
}
$('#state-modal').modal({ backdrop: 'static', keyboard: false }, 'show');
}
function textAreaListener() {
if (!($(this).val().trim())) {
$('#submit-button').prop({ disabled: true });
$('#batch-submit-button').prop({ disabled: true });
} else {
$('#submit-button').prop({ disabled: false });
$('#batch-submit-button').prop({ disabled: false });
}
}
function submitHandler() {
$('#state-modal-form').submit();
}
App.books.initState = initState;
App.books.assignHandlersToElements = assignHandlersToElements;
App.books.bookCommentableElementHandler = bookCommentableElementHandler;
App.books.textAreaListener = textAreaListener;
App.books.submitHandler = submitHandler;
App.books.assignHandlersToElements();
App.books.initState();
});
I have simulated your code on my side.我已经在我这边模拟了你的代码。 And prop({disabled: false });
和 prop({disabled: false }); is working for id changed button.
正在为 id changed 按钮工作。 Here is my code.
这是我的代码。
HTML: HTML:
<button id="submit-button">Submit</button>
<button id="disable_btn">Disable</button>
<button id="enable_btn">Enable</button>
<button id="change_id">Change ID</button>
jQuery: jQuery:
$(document).ready(function(){
$("#disable_btn").click(function(){
$('#submit-button').prop({ disabled: true });
$('#batch-submit-button').prop({ disabled: true });
});
$("#enable_btn").click(function(){
$('#submit-button').prop({ disabled: false });
$('#batch-submit-button').prop({ disabled: false });
});
$("#change_id").click(function(){
$('#submit-button').attr('id', 'batch-submit-button');
});
});
Please provide your exact case.请提供您的确切案例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.