0
다른 div에 div를 추가하려고합니다. 그건 잘 작동합니다. 여기에 몇 가지 도움이 필요합니다. 아래 코드에는 편집 가능한 내용과 저장 및 닫기 버튼이있는 div가 있습니다. div에 추가 된 저장 버튼을 클릭하면 하지만 Enter 버튼을 누르면 버튼을 클릭 할 수있게해야합니다. 버튼을 입력 할 때 버튼 트리거
function createNewList(listName) {
var cardNameFieldElement = $('<div class = "card-name-field" onkeydown=\'cardSave\' style = "white-space : normal; width: 240px; min-height: 60px; border-radius: 3px; margin-left: auto; margin-right: auto; background-color: #ffffff; " contenteditable = "true" data-placeholder = "Add a Card..." ></div>');
var saveCloseCardWrapper = $('<div class ="save-close-card-wrapper" style = "width: 250px; height: 35px; margin-top: 5px;"> \t \t <input class = "save-card" id = \'SAVE_CARD_BTN\' onclick = \'saveNewCard($(this))\' type="button" value="Save" style = "cursor: pointer; width: 60px; height: 30px; background-color: gray; border-color: gray; margin-left: 10px; border-radius: 3px; vertical-align: top;"><img class = "close-card-create" onclick = \'closeCard($(this))\' src = "media/icons/close.png" width="25" height="25" style = "cursor: pointer; margin-top: 4px; margin-left: 3px;"></div>');
}
function saveNewCard(saveCard) {
var parent = saveCard.closest('.board-list');
var cardName = parent.find('.card-name-field').text();
if (cardName !== "") {
var cardNameElement = $('<div class = "card-name">' + cardName + '</div>');
cardNameElement.insertBefore(parent.find('.create-card-section'));
parent.find('.card-name-field').html("");
}
}
$(".card-name-field").keyup(function(e) {
if (e.keyCode == 13) {
$(".save-card").click();
}
});
읽기의 [__'Event delegation'__] (https://learn.jquery.com/events/event-delegation/) – Rayon
당신은 넣을 수 있습니다 컨트롤을 폼에 저장하고 원하는 메서드를 폼의 형태로 호출하십시오. –
@Melbin'enter' 이벤트가 작동합니까? 왜냐하면 당신이 동적으로 html 컨텐트를 생성하고 있다고 생각하기 때문에 이벤트 리스너가 그것에 붙어서 작동하지 않기 때문에 동적 컨텐트가 삽입되기 전에 이미 존재하는 부모 엘리먼트를 참조해야합니다. 그래서 eventlisteners를'$ (document) .find (".card-name-field") .keyup (...'와'$ (document) .find (". save-card") 같은 동적 인 요소에 붙이십시오. 클릭 ("..'.이 작업을 수행 할 수있는 또 다른 방법이 있습니다. –