๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
์›น๊ณต๋ทฐ

jQuery ์ด๋ฒคํŠธ ์˜ˆ์ œ

by ์ด๋…ธํ‚ค_ 2019. 6. 26.

์‹ค๋ˆˆ.

js ๋‹จ

<script>
  $(function(){
    //์ด๋ฒคํŠธ click, dbclick, keypress(keydown, keyup), on
    $("#alertButton").click(function() {
    alert("click");
    });

    //1. ๊ฒ€์ƒ‰๋ฒ„ํŠผ ํด๋ฆญ์‹œ select๊ฐ’, text ํƒœ๊ทธ์˜ ๊ฐ’์„ console.log ์ถœ๋ ฅ
    $("#searchBTN").click(function() {
    var sel = $("#searchSel").val();
    var txt = $("#searchText").val();

    console.log(sel, "", txt);
    });

    //2. searchText ํƒœ๊ทธ์— ์—”ํ„ฐ ์ž…๋ ฅ์‹œ, select๊ฐ’, text ํƒœ๊ทธ์˜ ๊ฐ’์„ console.log ์ถœ๋ ฅ
    //keyup, keydown ํผ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌํ•  ๋•Œ ์ž์ฃผ ์‚ฌ์šฉ
    $("#searchText").keypress(function(evt) {
    var key = evt.keyCode;
    if(key == 13) {
    var sel = $("#searchSel").val();
    var txt = $("#searchText").val();

    console.log(sel, "", txt);
    }
    });

    $("#beforeButton").click(function() {
    var textTag = "<input type='text' value='์ด์ „' />";
    $("#addLayer").before(textTag);
    });

    $("#afterButton").click(function() {
    var textTag = "<input type='text' value='์ดํ›„' />";
    $("#addLayer").after(textTag);
    });

    $("#addBtn").click(function() {
    var textTag = "<input type='button' class='alertbutton' value='ํด๋ฆญ' />";
    $("#addLayer").append(textTag);
    });

    //$(document).on("์ด๋ฒคํŠธ", "selector", function(){});
    $(document).on("click", ".alertbutton", function(){
    console.log('click!!!');
    });

  });
</script>

body ๋‹จ

<body>
  <input type="button" id="addBtn" value="ํด๋ฆญ" />
  <input type="button" id="beforeButton" value="์ด์ „ ์ถ”๊ฐ€" />
  <input type="button" id="afterButton" value="์ดํ›„ ์ถ”๊ฐ€" />
  <div id="addLayer">

  </div>

  <input type="button" id="alertButton" value="click" />
  <select id="searchSel">
  <option value="first"> first </option>
  <option value="second"> second </option>
  <option value="third"> third </option>
  </select>
  <input type="text" id="searchText" />
  <input type="button" id="searchBTN" value="search"/>
</body>

๊ด€๋ จ๊ธ€

๋Œ“๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”