JQuery - on('change') vs change() 어떤 것을 쓰나?

이벤트 함수를 등록해서 쓰고 싶은데, 2가지 방식이 있네 on('change') vs change() 둘다 맞는데, 머 정답이라기 보다는 그냥 on(이벤트, function() {}); 형태로 사용하는 것을 강권합니다. 동적으로 생긴 컴포넌트도 쓸수있도록 하려면 on('change',... 를 쓰라고 하네요. JQuery 클릭 이벤트 on("click") 과 click() 의 차이 JQuery on("click")과 click() on("click") 과 click() 의 차이점은 동적으로 이벤트를 바인딩할 수 있는지의 차이다. on("click")은 동적으로 가능하고 click()은 최초에 선언된 element에만 동작한다. 아래 예.. lookingfor.tistory.com Pexels에서 Karo..

• format_list_bulleted Tech/프론트엔드
• · 2022. 9. 30.
• textsms

Jquery - 동일한 ID 가 여러개 있는 경우 click 이벤트 다 받기

동일한 ID를 쓰고 있는 객체의 이벤트를 받아 처리할 때는 그냥 $(#사용중인ID).on('click', .... 이렇게 사용하면 맨 처음 객체만 반응하는 경우가 나타났다. 나만 그런가? ㅋㅋ 암튼 아이디를 동일하게 사용해도 사용된 모든 객체에 이벤트를 발생하려면 아래와 같이 복수개를 처리할 수 있는 selector 형태로 불러 써야 한다. $("[id='사용중인ID']").on('click', function () { return confirm("Are you sure you want to delete?"); }); 간단하지만 실수하기 쉽다. 참고 페이지는 아래 https://stackoverflow.com/questions/8498579/how-does-jquery-work-when-there-are..

• format_list_bulleted Tech/프론트엔드
• · 2022. 6. 24.
• textsms

JQuery - select 선택 값 가져오기

select 선택 값을 jquery로 가져오기, 너무 쉽지 그냥 select 선택해서 val() 하면 되는거 아냐~~~~~ 했다가 ㅋㅋㅋ 실패 NoneType 이 올라오는데 ㅋㅋㅋ 아래처럼 해야 한다. var selvalue = $('#selectbox_id').find(":selected").text(); https://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown jQuery Get Selected Option From Dropdown Usually I use $("#id").val() to return the value of the selected option, but this time it doesn't ..

• format_list_bulleted Tech/프론트엔드
• · 2022. 5. 7.
• textsms

JQuery - 체크박스 선택시 input 활성화 및 포커스 주기

폼 객체를 한줄씩 쭉 나열되어 있고, 체크박스가 맨 앞에 있어서 체크를 하면 해당 줄이 활성화 되도록 하는 것 많이 정답들이 나와 있지만, 간단하게 구현한 결과를 저장 $("input:checkbox").on('click', function() { var target_input_name = "#" + $(this).val() + "_quantity" if ( $(this).prop('checked') ) { console.log($(this).val()) $(target_input_name).prop("disabled", false); $(target_input_name).focus(); } else { $(target_input_name).prop("disabled", true); $(target_in..

• format_list_bulleted Tech/프론트엔드
• · 2022. 5. 2.
• textsms

JQuery Ajax 로 form submit 하기 - form value 그대로 가져오기

요거 쉬운거 같은데, 예제들이 죄다 json으로 바꿔서 API 호출하는 형태로 되어 있는 것이 많네. 그냥 html 페이지에 있는 form submit을 jquery ajax 함수로 호출하는 방법을 정리해 두자. 이걸 한 이유는 submit 하고, 바로 그 정보를 이용해서 새창을 띄우도록 하려고 하니깐 ajax async false 로 동작 시켜야 했기 때문이다. 그냥 코드를 보자. $("#sel2").click(function(e){ e.preventDefault(); // avoid to execute the actual submit of the form. var button = $(this); var form = $("#mainform"); var actionUrl = form.attr('actio..

• format_list_bulleted Tech/프론트엔드
• · 2022. 4. 29.
• textsms

JQuery - select 박스 선택시 일부 disable 설정하기

그냥 노트 저장용, 선택된 값에 따라 특정 Input 을 비활성화 시킬 때 사용하는 코드 attr removeAttr prop 이런 것들을 잘써야 하네. $("[name$='-group0']").on("change", function(){ // //selected value // console.log($(this).val()); // console.log($("option:selected", this).attr("value")); // //selected option element // console.log($("option:selected", this)); // console.log($("option:selected", this).text()); // console.log($(this).find("op..

• format_list_bulleted Tech/프론트엔드
• · 2022. 4. 27.
• textsms

JQuery - 비슷한 id 가진 객체 이벤트 같이 처리하기

HTML id 를 비슷하게 줘서 이벤트 처리를 하나로 하고 싶은 경우가 많다. 동일하게 주기는 찝찝하고, 뒤에 인덱스 같은거 붙여서 같은 기능을 하는 놈들을 비슷한 id로 묶어 뒀는데, 개별적으로 이벤트 처리하려니 영 맘이 안내킨다. 간단하게 JQuery 쓰면서 정규식 비스무리한 거 쓰면 해결!! 원본 글로 방문해서 보는 것을 추천 - https://m.blog.naver.com/cutesboy3/221080367471 for의 index를 부여해서 id값을 부여하여 id가 클릭시 클릭 이벤트처리하는 방법을 아래 스크립트(정규식)으로 처리 할수 있다. $("[id^='useGo_']").click(function() { // 기능 구현하기 }); 간단하게 설명을 하면 //id가 testid로 시작하는 엘..

• format_list_bulleted Tech/프론트엔드
• · 2022. 3. 16.
• textsms

JQuery / JS에서 사용되는 코드 조각들

JQuery 혹은 자바스크립트 에서 사용되는 코드 조각들을 여기에 일단 유용한 것만 모아두자. 참고 - 셀렉트박스 유지를 위한 스크립트 페이지의 쿼리 파라메터를 읽어와서 기존 값을 유지하는 코드 함수, 그대로 가져왔는데 왠만하면 아래 글쓴이 링크로 가서 읽어보세요. (여긴 그냥 제 참고용으로 남겨둡니다. 설명은 원본글에서 읽으세요 ^^;;;) https://wayhome25.github.io/django/2017/03/01/django-99-my-first-project-5/ // get url query string var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.locatio..

• format_list_bulleted Tech/프론트엔드
• · 2021. 12. 10.
• textsms