jQuery에서 이벤트를 클릭하기 위해 매개 변수를 전달하십시오.

Question

해당하는 .js 파일에 아래 코드가있는 HTML 페이지가 있습니다. Texturea 요소 txtexamplereviewed 있는데 Alt + Shift + A 단추를 클릭하면 btnAddMicroElement 이벤트가 발생하고 레이블에 텍스트 입력 및 단추가 포함 된 새 div가 페이지에 추가됩니다. 이 동적으로 추가 된 div의 텍스트 입력은이 이벤트를 트리거하기 전에 텍스트 영역 txtexamplereviewed에서 선택된 텍스트를 갖습니다. 이를 위해이 텍스트를 btnAddMicroElement의 클릭 이벤트에 전달해야합니다. 아래에 주어진대로 그 짓을하지만 그 작동하지 및 textarea에서 선택한 텍스트 대신 텍스트 입력 텍스트 microelement 가져 오는. 내 코드를 수정하도록 도와주세요.

$(document).ready(function(){   
    $("#btnAddMicroElement").click(function(microelement){ 
    alert("clicked"); 
    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=microelement><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
     return false; 
    }); 
});  

function getSelectedText(el) { 
    var sel, range; 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     return el.value.slice(el.selectionStart, el.selectionEnd); 
    } else if (
      (sel = document.selection) && 
      sel.type == "Text" && 
      (range = sel.createRange()).parentElement() == el) { 
     return range.text; 
    } 
    return ""; 
} 

window.onload = function() { 
    document.getElementById("txtexamplereviewed").onkeydown = function(e) { 
    if(e.altKey && e.shiftKey && e.which==65){  
      $("#btnAddMicroElement").trigger("click",[getSelectedText(this)]);  
    } 
    }; 
}; 

Answer 1

사용자 정의 매개 변수가 두 번째 인수로 온다, 그래서 나는 조금 당신의 코드를 수정했습니다 :

Answer 2

나는 당신의 코드를 수정했다. 그리고 keydown 이벤트가 더 잘 작동합니다. 나는 ... 당신은 여전히 ​​전체 수행하려고 jQuery를 사용하는 keydown 이벤트 jQuery로 핸들러 ...을 설정 한

JSFIDDLE : http://jsfiddle.net/algorhythm/y99xytvn/2/

$(document).ready(function() { 
    $("#btnAddMicroElement").click(function(event, microelement) { 
     if (!isString(microelement)) { microelement = ''; } // be sure that microelement is a string 
     $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=" +microelement +"><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
     return false; 
    }); 

    $('#txtexamplereviewed').keydown(function(e) { 
     if (e.altKey && e.shiftKey && e.which == 65) { 
      e.preventDefault(); // don't insert the pressed 'A' into textarea 
      $("#btnAddMicroElement").trigger("click", [getSelectedText(this)]); 
     } 
    }); 
}); 

// unchanged 
function getSelectedText(el) { 
    var sel, range; 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     return el.value.slice(el.selectionStart, el.selectionEnd); 
    } else if (
      (sel = document.selection) && 
      sel.type == "Text" && 
      (range = sel.createRange()).parentElement() == el) { 
     return range.text; 
    } 
    return ""; 
} 

function isString(str) { 
    return typeof str == 'string' || str instanceof String; 
} 

공지 사항 : 내 맥에 나는 타격 해요 ALT + SHIFT + A 다음 문자가 입력란에 입력됩니다 : Å. 이 문제를 방지하기 위해 바로 가기를 탐지하는 if 절 안에 e.preventDefault(); 줄을 추가했습니다.

업데이트 : 마이크로 요소가 문자열인지 확인하기 위해 isString 함수를 추가했습니다. id가 btnAddMicroElement 인 버튼을 클릭하면 추가 된 텍스트 상자에 undefined을 쓰는 버그가 수정됩니다.

$(document).ready(function(){   
    $("#btnAddMicroElement").click(function(event){ 
    alert("clicked"); 
    var txt = document.getElementById("txtexamplereviewed"); 
    content = getSelectedText(txt); // get the text here 
    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value=microelement><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
     return false; 
    }); 
}); 
window.onload = function() { 
    document.getElementById("txtexamplereviewed").onkeydown = function(e) { 
    if(e.altKey && e.shiftKey && e.which==65){  
     $("#btnAddMicroElement").trigger("click");  
    } 
    }; 
}; 

function getSelectedText(el) { 
    var sel, range; 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
    return el.value.slice(el.selectionStart, el.selectionEnd); 
    } else if (
     (sel = document.selection) && 
     sel.type == "Text" && 
     (range = sel.createRange()).parentElement() == el) { 
    return range.text; 
    } 
    return ""; 
} 

Answer 3

이 대신처럼 할 수는 경우

$("#btnAddMicroElement").click(function (microelement, text) { 

    $("#divVerification").append("<div class='clsdivmicroelement'><label>Microelement</label><input type='text' class='clstxtmicroelement'/ value="+text+"><input type='button' class='clsbtnmicroelmentadd' value='Add'/></div>"); 
    return false; 
}); 

이 fiddle에 보면하세요 당신이 필요로하는 것.