2016-08-01 3 views
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(); 
    } 
}); 
+0

읽기의 [__'Event delegation'__] (https://learn.jquery.com/events/event-delegation/) – Rayon

+0

당신은 넣을 수 있습니다 컨트롤을 폼에 저장하고 원하는 메서드를 폼의 형태로 호출하십시오. –

+0

@Melbin'enter' 이벤트가 작동합니까? 왜냐하면 당신이 동적으로 html 컨텐트를 생성하고 있다고 생각하기 때문에 이벤트 리스너가 그것에 붙어서 작동하지 않기 때문에 동적 컨텐트가 삽입되기 전에 이미 존재하는 부모 엘리먼트를 참조해야합니다. 그래서 eventlisteners를'$ (document) .find (".card-name-field") .keyup (...'와'$ (document) .find (". save-card") 같은 동적 인 요소에 붙이십시오. 클릭 ("..'.이 작업을 수행 할 수있는 또 다른 방법이 있습니다. –

답변

1

사용 trigger("click") 대신에 대한 click()

$(".card-name-field").keyup(function(e) { 
    if (e.keyCode == 13) { 
    $(".save-card").trigger("click"); 
    } 
}); 
관련 문제