홈>
동적으로 추가 된 .add 버튼을 클릭하면 데이터에서 선택하기 위해 ajax를 호출하지만 첫 번째 모듈에서 m을 클릭하고 okey를 클릭하면 다음에 두 번째 모듈로 이동하여 클릭하면 ajax가 중복됩니다. 전화를 걸어 실수 한 위치를 모르는 필터 하나 더 추가했습니다. 문제를 해결하도록 도와주세요
여기 코드 :
하나의 모듈 :
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'class': '',
'orderable': false,
"mData": "comment_type_value", "mRender": function (data, type, full) {
if (data > 0) {
return '<label class="details-control" style="width:100%; height:100%;"> ' + translate('t_expand_comment_type_down') + ' </label>';
} else {
return "";
}
},
},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'seller'},
{'data': 'buyer'},
{'data': 'cat'},
{'data': 'comment_type'},
{'data': 'startts'},
{'data': 'endts'},
{'data': 'ts'},
{'data': 'price'},
{'data': 'qty'},
{'data': 'sales'},
];
var order = [];
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "transaction");
URL_TMP = "";
<?php else: ?>
getButtonsAfterAdded();
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
resetSelect2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLTransactionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLTransactionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
resetSelect2();
transactionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "transaction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 1,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateTransaction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersTransaction(),
format: 0,
module_id: <?php echo \kontrola\TransactionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLTransactionValues(filterId));
// transactionDefaultStateOptions();
transactionDatepicker();
resetSelect2();
});
<?php endif; ?>
});
다른 모듈 :
$(document).ready(function () {
$("select").select2();
var $toggleColumns = $('.toggleColumns');
var datatableName = "list";
var $body = $("body");
var URL = 'xxx';
var columns = [
{'data': 'title', 'class': "datatable-row-title"},
{'mData': 'item', "mRender": function (data, type, full) {
return data;
}},
{'data': 'price'},
{'data': 'qty'},
{'data': 'user'},
{'data': 'cat'},
{'data': 'startts'},
{'data': 'endts'}
];
var order = [];
getButtonsAfterAdded();
<?php if (isset($_GET["filters"])): ?>
URL_TMP = URL;
URL_TMP += "?insert=false";
getAjaxDatatable(datatableName, URL_TMP, columns, order, "auction");
URL_TMP = "";
<?php else: ?>
$body.on("click", ".toggleColumnsButton", function (e) {
$("#columnsContainer").toggle("slow");
return false;
});
$body.on("click", ".remove", function (e) {
e.preventDefault();
$(this).parent().parent().remove();
getButtonsAfterRemove();
if ($("#list tbody tr").length > 0) {
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
$("select").select2("destroy");
$("select").select2();
});
$body.on("change", ".commentType", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on("change", ".categories", function () {
if ($("#list tbody tr").length > 0) {
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".add", function (e) {
e.preventDefault();
var filterID = $(this).parent().prev().find("option:selected").attr("data-filteroptionid");
$(".filters").append(filtersHTMLAuctionSelect(filterID));
var filterId = $(".filter:last-child .chooseFilter option:not(:disabled)").attr("data-filterOptionId");
$(".filter").last().prepend("<div class='col-sm-4 form-group sibling'>" + filtersHTMLAuctionValues(filterId) + "</div>");
$(".filter").last().append(getCollectionOfButtons());
$("select").select2("destroy");
$("select").select2();
auctionDatepicker();
getButtonsAfterAdded();
});
$body.on("keypress", function (e) {
if (e.keyCode == 13) {
loader.popup("show");
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
loader.popup("hide");
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
}
});
$body.on('click', ".search", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
getAjaxDatatable(datatableName, URL, columns, order, "auction");
});
$toggleColumns.on('click', function (e) {
var column = $('#' + datatableName).DataTable().column($(this).attr('data-column'));
column.visible(!column.visible());
});
$(".csv").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 1,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$(".xls").on("click", function (e) {
e.preventDefault();
var validate = validateAuction();
if (validate.status == false) {
$.gritter.add({
title: tranlate("gritter_title_validate"),
text: validate.msg,
class_name: 'danger',
time: '5000'
});
return false;
}
$.ajax({
method: "POST",
url: "xxxx",
dataType: "JSON",
data: {
filters: getActiveFiltersAuction(),
format: 0,
module_id: <?php echo \kontrola\AuctionActions::$MODULE_ID; ?>
},
success: function (response) {
getAccessMessageWithStatusDataTable(response);
getUses();
$.gritter.add({
title: translate('gritter_title_raports'),
text: $("#waitingTimeForFile").html(),
class_name: 'success'
});
$("[data-controller-name=raportsDownloaded]").css({
"color": "red"
});
setTimeout(function () {
$(".nav.nav-pills.nav-stacked.nav-quirk").find("[data-controller-name=raportsDownloaded]").css({
color: "#505b72"
});
$.gritter.removeAll();
}, 15000);
}
});
});
$body.on("click", "#raportsScroll", function (e) {
e.preventDefault();
var top = $("[data-controller-name=raportsDownloaded]").offset().top;
top = 241 - 65;
$('html, body').animate({
scrollTop: top
}, 1000);
});
$body.on("change", ".chooseFilter", function () {
var filterId = $(this).find(":selected").attr("data-filterOptionId");
$(this).parent().prev().html(filtersHTMLAuctionValues(filterId));
auctionDefaultStateOptions();
auctionDatepicker();
$("select").select2("destroy");
$("select").select2();
});
<?php endif; ?>
});
<?php endif; ?>
아약스 호출 함수는 다음과 같습니다 :
function filtersHTMLAuctionSelect() {
var filters = "";
$.ajax({
method: "POST",
url: "xxxxx",
dataType: "JSON",
async: false,
success: function (response) {
filters += "<div class='filter'><div class='col-sm-4 form-group'>";
filters += "<select class='form-control chooseFilter' style='width: 100%;'>";
$.each(response, function (index, value) {
filters += "<option data-filterOptionId=" + value.id + ">" + translate(value.title) + "</option>";
});
filters += "</select>";
}
});
filters += "</div></div>";
return filters;
}
좋아요. 버튼을 동적으로 추가하면 문제가 해결됩니다.
$body.off('click', '#add').on('click', "#add", function (e) {
$body.off('click', '#search').on('click', "#add", function (e) {
나에게 효과적입니다.
HTML 버튼 그룹 :
<div class="col-sm-4 form-group">
<div class="col-lg-3"></div>
<div class="col-lg-1"></div>
<button class="add btn btn-success btn-quirk col-sm-3" id="add"><i class="glyphicon glyphicon-plus"></i></button>
<div class="col-lg-1"></div>
<button class="search btn btn-warning btn-quirk col-sm-3" id="search"><i class="glyphicon glyphicon-search"></i></button>
</div>
- 답변 # 1
- 답변 # 2
때때로이 문제는 내부에 자식을 포함하는 요소에 대해 ajax 호출을 만들고 자식에 대해서도 반복적으로 호출하는 경우에 나타납니다. 그리고 Thanpa 솔루션을 사용해보십시오-
$('#add').on('click', function (e) {
관련 자료
- javascript - 데이터 테이블에서 버튼 클릭 후 행 데이터를 얻는 방법
- 캔버스에서 버튼의 좌표를 찾고 Java 및 Selenium을 사용한 후 클릭하는 방법은 무엇입니까?
- reactjs - 잡히지 않은 syntaxerror - 예기치 않은 토큰 '<'| "원사 xlsx 추가"후 | 반응 형
- javascript - 클릭 후 아이콘 요소 교체
- python - 오류 - 줄 연속 문자 다음에 예기치 않은 문자
- 우분투 1404를 우분투 1604로 업그레이드 한 후 OpenVPN이 예기치 않게 종료됩니다
- c# - 다른 listview의 항목에서 click 이벤트 후 ListView에 대한 데이터로드
- microsoft excel - 필터링 후 중복 제거
- Kendo UI에서 ajax를 사용하여 html 추가 후 클릭하지 않음
- javascript - 다음을 클릭 한 후 모든 요소 li을 10으로 표시하여 10을 표시하는 방법 prev 10 숨기기 및 새 jquery 표시
- javascript - 클릭 후 버튼을 표시하거나 숨기려면 어떻게해야합니까?
- c# - C # 80을 사용하여 Visual Studio에서 스위치 케이스를 최적화 한 후 예기치 않은 결과
- ubuntu 18.04 - 내 if 문이 작동하지 않는 이유 - 예기치 않은! || 이후
- javascript - 페이지가로드 된 후 추가 한 버튼을 클릭 할 수 없습니다
- javascript - 제출 버튼을 클릭 한 후 쉼표를 제거하십시오
- javascript - 버튼 클릭 후 재정렬이 작동하지 않는 이유는 무엇입니까?
- javascript - 클릭 후 입력 데이터 지우기
- reactjs - PayPal 버튼이 닫히지 않습니다 (다시 렌더링 한 후 복제)
- javascript - 버튼 클릭 후 텍스트 필드를 비우는 방법
- javascript - 반응 부트 스트랩 테이블 - 기본적으로가 아닌 행 클릭 후에 만 구성 요소 확장
관련 질문
- javascript - URL에 #이없는 다른 웹 사이트 페이지에서 특정 div로 이동하는 방법
- javascript - PHP와 jQuery를 사용하여 DB에서 체크 박스 데이터를 가져 오는 방법은 무엇입니까?
- php - jQuery/JavaScript에서 행 ID onClick을 얻는 방법은 무엇입니까?
- javascript - 제출할 특정 테이블 선택
- php - 다중 사용 및 재사용 가능한 JavaScript 카운트 다운 타이머
- javascript - 새로 고친 후 동일한 버튼 기능을 실행하십시오jquery
- javascript - PHP의 동적 선택 옵션 및 동적 데이터
- javascript - 클릭 기능이있는 갤러리를로드하면 TouchTouch 갤러리가 작동하지 않습니다
- javascript - 동적 목록 IF 조건을 단축하는 방법?
- javascript - 두 개의 URL에서 "GET"요청 풀?
전파를 중단해야 할 수도 있습니다. 이것은 버블 링 문제 일 수 있습니다.
전화 할 때
또한 호출 중지 전파는 코드를 다음과 같이 만듭니다 :
자세한 내용은 https://api.jquery.com/event.stoppropagation/
를 참조하십시오.수정 :
잘못 될 수있는 또 다른 일이 여기 있습니다 :
사용해보십시오