배열의 값을 html로 입력 배열의 모든 요소에 이벤트를 추가하고 얻을

내가 가진 4 개 입력이 행 :배열의 값을 html로 입력 배열의 모든 요소에 이벤트를 추가하고 얻을

<div id="productRow1" class="productRow"> 
    <input type="text" name="numbers[]"> 
    <input type="number" name="quantities[]"> 
    <input type="text" name="levels[]"> 
    <input type="number" name="prices[]"> 
</div>

I가 버튼과 함께 "또 다른 제품을 추가"사용자가 다른 행을 추가 할 수 있습니다 버튼을 클릭하여 생성 된 행은 고유 divid와 같이 될 것입니다 :

<div id="productRow2" class="productRow"> 
    <input type="text" name="numbers[]"> 
    <input type="number" name="quantities[]"> 
    <input type="text" name="levels[]"> 
    <input type="number" name="prices[]"> 
</div>

나는이 같은 모든 행에 대한 래퍼 DIV 있습니다

나는 독특한 div row id 동적으로 새로운 행을 추가하는 방법

<div class="input_fields_wrap"> 
    <div id="productRow1" class="productRow">...</div> 
    <div id="productRow2" class="productRow">...</div> 
    ... 
</div>

때 "다른 제품 추가"버튼을 클릭하십시오 :

var wrapper = $(".input_fields_wrap"); 
$(wrapper).append('<div ' + divId + ' class="productRow"' + '> 
       <input type="text" name="numbers[]"/>' + 
       '<input type="number" name="quantities[]"/>' + 
       '<input type="text" name="levels[]"/>' + 
       '<input type="number" name="prices[]"/>');

또한 총계가 표시되어야하는 다른 텍스트 상자가 있습니다. 곧. 그래서 각 행의 가격이 사용자에 의해 입력 된 후에 각 행의 가격 데이터를 가져와야합니다. 나는이처럼 내 prices[] 모든 필드에 이벤트를 추가하려고 :

$(function() { 
    $('input[name="prices[]"]').blur(function() { 
     alert('testAlert'); 
    }); 
});

그러나 그것은 작동하지 않았다.

function calculateTotal() { 
    alert('testAlert'); 
    var prices = $('input[name="prices[]"]').map(function() { 
     alert(this.value); 
     return this.value; 
    }).get(); 
}

나는 또한이 같은 입력 필드를 지정 시도 : : 함수와

<input type="number" name="prices[]" onblur="calculatePrice()">

: 나는이 같은 가격을 얻기 위해 기존 생성 된 입력 필드에 onblur 이벤트를 추가하려고 'input[name^="prices"]' 이 같은 이벤트 추가 :

$('input[name="prices[]"]').on('blur', function() { 
    alert('testAlert'); 
});

을 그리고 내 가격 입력에 class='priceClass'을 추가 한 후이 같은 클래스에서 이벤트를 추가 필드 :

<input type="number" name="prices[]" class="priceClass"> 
$('.priceClass').on('blur', function() { 
    alert('testAlert'); 
});

이러한 이벤트가 트리거되지 않았습니다. 그렇다면 어떻게하면 HTML 입력 배열의 모든 요소에 이벤트를 추가하고 이벤트가 트리거 된 후 입력 배열의 모든 값을 가져올 수 있습니까?

출처

2016-12-14 vontarro

, 당신은 어떤 필드의 생성시 기능을 결합 할 수 있어야한다 ? – pshep123

@ pshep123, 예를 보여 줄 수 있습니까? – vontarro

은 자식 선택자에 대한 jQuery 위임 위임을 참조하십시오 (http://api.jquery.com/on/). 사실, 동적으로 추가되지 않은 부모 요소에'.on '을 붙이지 만, 이벤트를 트리거하고자하는 선택자를 지정하십시오. 즉. alert ('testAlert'); }); ' – haxxxton

당신은 아마 같은 뭔가가 필요 : 새 필드를 추가 할 jQuery를 사용하는 경우

$(function(){ 
 

 
function getVals(){ 
 
    var n = 0; 
 
    $("input[name='prices[]']").each(function(i, e){ 
 
    n += +$(e).val(); 
 
    }); 
 
    return n; 
 
} 
 
$("input[name='prices[]']").change(function(){ 
 
    $('#out').html(getVals()); 
 
}); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> 
 
    <head> 
 
    <meta http-equiv='content-type' content='text/html;charset=utf-8' /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
<body> 
 
    <input type='number' name='prices[]' value='10' multiple='multiple' /> 
 
    <input type='number' name='prices[]' value='2' multiple='multiple' /> 
 
    <input type='number' name='prices[]' value='7' multiple='multiple' /> 
 
    <input type='number' name='prices[]' value='1' multiple='multiple' /> 
 
    <div id='out'></div> 
 
</body> 
 
</html>

출처

2016-12-14 03:45:11 PHPglue

여기에 버튼에 이벤트를 할당합니다. 내 필드에 이벤트를 지정해야합니다. 이벤트가 흐릿하거나 변경 될 수 있습니다. – vontarro

잠시만 기다려주세요. – PHPglue

배열의 값을 html로 입력 배열의 모든 요소에 이벤트를 추가하고 얻을

답변

관련 문제