JQuery函数在硬编码表上工作但不是动态生成的内容

时间：2014-11-02 10:50:56

标签： jquery

我正在编写一个浏览器发票生成工具中的Web应用程序。我有一个jQuery脚本来计算该项目的总数，动态根据您开具发票的任务更改每单位成本，并将新项目（表格行）添加到发票中，我的代码可以正常处理任何硬编码到表，但jQuery附加到表中，脚本不会计算值。

附加项目 $('#id').append() ;

脚本：http://jsfiddle.net/hb6mmkss/

注意：由于某种原因，脚本在我的jsfiddle中不起作用，但在浏览器中工作正常，但你仍然可以看到代码。

有人能看出为什么会这样吗？

＆＃13;
＆＃13; 
$(document).ready(function(){
	$('input').keyup(function(){	
		$parent = $(this).parent().attr('class');
		if( $("." + $parent + ">select").val() == "page"){
			$("." + $parent + ">.unit").val('75');
		}else if($("." + $parent + ">select").val() == "content"){
			$("." + $parent + ">.unit").val('50');
		}else if($("." + $parent + ">select").val() == "wp"){
			$("." + $parent + ">.unit").val('300');
		}else if($("." + $parent + ">select").val() == "store"){
			$("." + $parent + ">.unit").val('150');
		}else if($("." + $parent + ">select").val() == "store-items"){
			$("." + $parent + ">.unit").val('12.50');
		}else if($("." + $parent + ">select").val() == "seo"){
			$("." + $parent + ">.unit").val('50');
		}

		function calcInd($parent){
			$unit = $('.' + $parent + '>.unit').val();
			$quant = $('.' + $parent + '>.quant').val();
			$total =  $unit * $quant;
			$('.' + $parent + '>.it-total').val($total);
		};
		calcInd($parent);
 	});

 	$('#add').click(function(){
 		$newClass = $('#main-table tr').length;
 		$newRow = '<tr><td class="it-' + $newClass + '"><select><option value="page">Web Pages</option><option value="content">Content for pages</option><option value="wp">Wordpress Install / Config</option><option value="store">eCommerce Setup</option><option value="store-items">eCommerce Store Items Data Entry</option><option value="seo">On Page SEO</option></select></td><td class="it-' + $newClass + '"><input type="text" class="quant"></td><td class="it-' + $newClass + '"><input type="text" class="unit"></td><td class="it-' + $newClass + '"><input type="text" class="it-total"></td></tr>';
 		$('#main-table').append($newRow);
 	});
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
<table id="main-table">
	<thead>
		<th>
			<td>
				<h3>Item / Task</h3>
			</td>
			<td>
				<h3>Quantity/Hours</h3>
			</td>
			<td>
				<h3>Unit Price</h3>
			</td>
			<td>
				<h3>Item /Task Total</h3>
			</td>
		</th>
	</thead>
	<tbody>
		<tr>
			<td class="it-1">
				<select>
					<option value="page">Web Pages</option>
					<option value="content">Content for pages</option>
					<option value="wp">Wordpress Install / Config</option>
					<option value="store">eCommerce Setup</option>
					<option value="store-items">eCommerce Store Items Data Entry</option>
					<option value="seo">On Page SEO</option>
				</select>
			</td>
			<td class="it-1">
				<input type="text" class="quant">
			</td>
			<td class="it-1">
				<input type="text" class="unit">
			</td>
			<td class="it-1">
				<input type="text" class="it-total">
			</td>
		</tr>
	</tbody>
</table>
<button id="add">Add Row+</buttom>
<script src="app.js"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

您可以使用（从jQuery 1.7开始）jQuery.fn.on来实现该功能。

.on( events [, selector ] [, data ], handler )

试试这个

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<script src="res/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>

$(document).ready(function(){
    $('#main-table').on("keyup","input",function(){
        alert("keyup!");    
        $parent = $(this).parent().attr('class');
        if( $("." + $parent + ">select").val() == "page"){
            $("." + $parent + ">.unit").val('75');
        }else if($("." + $parent + ">select").val() == "content"){
            $("." + $parent + ">.unit").val('50');
        }else if($("." + $parent + ">select").val() == "wp"){
            $("." + $parent + ">.unit").val('300');
        }else if($("." + $parent + ">select").val() == "store"){
            $("." + $parent + ">.unit").val('150');
        }else if($("." + $parent + ">select").val() == "store-items"){
            $("." + $parent + ">.unit").val('12.50');
        }else if($("." + $parent + ">select").val() == "seo"){
            $("." + $parent + ">.unit").val('50');
        }

        function calcInd($parent){
            $unit = $('.' + $parent + '>.unit').val();
            $quant = $('.' + $parent + '>.quant').val();
            $total =  $unit * $quant;
            $('.' + $parent + '>.it-total').val($total);
        };
        calcInd($parent);
    });

    $('#add').on("click",function(){
      alert("clicked!");
        $newClass = $('#main-table tr').length;
        $newRow = '<tr><td class="it-' + $newClass + '"><select><option value="page">Web Pages</option><option value="content">Content for pages</option><option value="wp">Wordpress Install / Config</option><option value="store">eCommerce Setup</option><option value="store-items">eCommerce Store Items Data Entry</option><option value="seo">On Page SEO</option></select></td><td class="it-' + $newClass + '"><input type="text" class="quant"></td><td class="it-' + $newClass + '"><input type="text" class="unit"></td><td class="it-' + $newClass + '"><input type="text" class="it-total"></td></tr>';
        $('#main-table').append($newRow);
    });
});

</script>

</head>
<body>
<body>
<table id="main-table">
    <thead>
        <th>
            <td>
                <h3>Item / Task</h3>
            </td>
            <td>
                <h3>Quantity/Hours</h3>
            </td>
            <td>
                <h3>Unit Price</h3>
            </td>
            <td>
                <h3>Item /Task Total</h3>
            </td>
        </th>
    </thead>
    <tbody>
        <tr>
            <td class="it-1">
                <select>
                    <option value="page">Web Pages</option>
                    <option value="content">Content for pages</option>
                    <option value="wp">Wordpress Install / Config</option>
                    <option value="store">eCommerce Setup</option>
                    <option value="store-items">eCommerce Store Items Data Entry</option>
                    <option value="seo">On Page SEO</option>
                </select>
            </td>
            <td class="it-1">
                <input type="text" class="quant">
            </td>
            <td class="it-1">
                <input type="text" class="unit">
            </td>
            <td class="it-1">
                <input type="text" class="it-total">
            </td>
        </tr>
    </tbody>
</table>
<button id="add">Add Row+</buttom>
<script src="app.js"></script>
</body>

</body>
</html>
相关问题
最新问题