时间戳

首页 > 解决方案 > jQuery 追加不在 DOM 和脚本运行两次

javascript - jQuery 追加不在 DOM 和脚本运行两次

问题描述

我有这个脚本

			$(document).ready(function(){
        		$("li").on("click", "span",function(){
            		if ( $(this).attr('class') == "plus" ){
            			var _this = $(this);
            			var parent = $(this).parent();
            			parent.append($("<select class='aruCikk'>").html("<option hidden disabled selected value> -- Válassz egy opciót! -- </option>"));
                		var liSelect = $(_this).parent();
                		var aruAdatokId = _this.parent().parent().parent().attr('class');
                		var params = {mode:"aruadatok", id:aruAdatokId};
                		$.post("./src/source.php", params, function(result, success, xhr){
                    		if( success == "success" ){
                        		var select = $("select");
                        		$.each(result, function(key, value){
    
                        			var net_price = value["netUnitPrice"] * value["quantity"];
                                    var vat_amount = calcVat(net_price, value["vatRate"]);
                                    var gross_amount = net_price + vat_amount;
                            		
                            		$(liSelect).find(select).append($("<option class='"+value["aruAdatokId"]+" "+value["quantity"]+" "+value["quantityUnit"]+"'>").html(value["productName"]+", "+net_price+" (nettó) + "+vat_amount+" (áfakulcs: "+value["vatRate"]+") = "+gross_amount+" "+value['Currency']));
                            		});
                        		$(liSelect).find(select).parent().append($("<input type='text' name='quantity' class='quantity' size=1>").html("<span class='quantityUnit'></span>"));
                    		}
                    		}, 'json');
                		_this.removeClass('plus').addClass('minus');
                		_this.find('img').attr('src', './images/minus.png');
                		_this.find('img').attr('alt', 'minus');
    
                		var grandParent = $(this).parent().parent()
                		grandParent.append($("<li>").html("<span class='plus'><img src='./images/plus.png' alt='plus'></span>"));
            		} else if ( $(this).attr('class') == "minus" ){
            			$(this).parent().remove();
            		}
        		});

            	$("select").on('change', function(){
                	var selected = $( "option:selected", this );
                	var params = selected.attr("class");
                });
    		});
<html>
<head>
  <meta content = "text/html; CHARSET=UTF-8" >
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <div id="elonezet">
		<ol>
			<li style="background-color:#EEEEEE" class="37">
                <p><strong>XYZ Kft.</strong>, Address Etc. datas<br>
					Kelt: 2019.10.28., teljesítés: 2019.10.28.
                </p>
				<ul>
					<li class="65">
						<span class="minus"><img src="./images/minus.png" alt="minus"></span>
						<select>
							<option>Option 1</option>
							<option>Option 2</option>
							<option selected="" value="">Option 3</option>
							<option>Option 4</option>
						</select>
						<input type="text" name="quantity" class="quantity" value="1" size="1">
						<span class="quantityUnit">db</span></li><li><span class="plus"><img src="./images/plus.png" alt="plus"></span>
					</li>
				</ul>
			</li>
		</ol>
	</div>
</body>
</html>

这不是一个完整的示例，我将数据库用于新列表中的选择/选项元素。当它生成一个新列表时，我无法检测到选择元素的变化。如果我点击“加号”图片，脚本会运行两次，首先运行“if”部分，然后运行“else”部分代码。

标签： javascriptjquery

解决方案

推荐阅读