0

以下は私のコードです。ピースを個別に正しく機能させることはできますが、全体として機能しない理由を特定することはできません。http://www.center-center.com/frames-stretcher%20app.phpでその実例を見ることができます。フォーム要素が変更されるたびに、ページの下部にあるテーブルをフォームで更新したいと思います。選択したラジオボタンとテキスト入力を変更するとページは正しく機能しますが、私が知らない理由でドロップダウンメニューを使用するとその場で更新されません。select要素の値は伝達されますが、何らかの理由で他の入力のようにその場で更新されません。私はそれらを個別にテストしました、そしてそれはうまくいきます、しかしそれがすべて一緒になったらそれはダメです。私は過去数日間これを適切に機能させるように努めてきたので、どんな助けでも大歓迎です。

    $(document).ready(function(){
        var type = null;

        $("#stretcher-op").change(function() {
            $("#stock-select div").hide();

            if (type != $('input[name=type]:checked').val()) {
                if (type == 'frame') {
                    $("select#stock-op").remove();
                    $("select#corner-op").remove();
                    $("select#finish-op").remove();

                    $("label[for=finish-op]").hide();
                }

                $("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($stretcher_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
                $("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($stretcher_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
            }

            type = $('input[name=type]:checked').val(); //stretcher
        });

        $("#frame-op").change(function() {
            $("#stock-select div").hide();

            if (type != $('input[name=type]:checked').val()) {
                if (type == 'stretcher') {
                    $("select#stock-op").remove();
                    $("select#corner-op").remove();
                }

                $("label[for=finish-op]").show();               

                $("label[for=stock-op]").after('<select id="stock-op" name="stock"><option selected="selected"></option><?php $i = 0; foreach($framing_stock_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
                $("label[for=corner-op]").after('<select id="corner-op" name="corner"><option selected="selected"></option><?php $i = 0; foreach($framing_corner_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
                $("label[for=finish-op]").after('<select id="finish-op" name="finish"><option selected="selected"></option><?php $i = 0; foreach($framing_finish_options as $option) { if ($option['show'] == 1) { echo('<option value="' . $i . '">' . $option['name'] . '</option>'); } $i++; } ?></select>');
            }

            type = $('input[name=type]:checked').val(); //frame
        });

        $("input,select").change(function() {
            width = $('#width').val();
            height = $('#height').val();
            quantity = $('#quantity-op').val();
            stock = $('#stock-op option:selected').val();
            corner = $('#corner-op option:selected').val();
            finish = $('#finish-op option:selected').val();

            $("#quote").load('art-product-calculator.php?type=' + type + '&width=' + width +'&height=' + height + '&quantity=' + quantity + '&stock=' + stock + '&corner=' + corner + '&finish=' + finish);
        });
    });
</script>
</head>

<body>
<div id="container">
    <header id="banner">
        <img src="" />
    </header>

    <section id="selection">
        <div class="option" id="stretcher">
            <label for="stretcher-op">Stretcher</label><br />
            <input id="stretcher-op" name="type" type="radio" value="stretcher" />
        </div>
        <div class="option" id="frame">
            <label for="frame-op">Frame</label><br />
            <input id="frame-op" name="type" type="radio" value="frame" />
        </div>

        <div class="option" id="quantity">
            <label for="quantity-op">Quantity </label><input id="quantity-op" name="width" type="" value="" size="6" />
        </div>

        <div class="option" id="dimensions">
            <input id="width" name="width" type="" value="width" size="6" /> <label for="width">inches</label> by 
            <input id="height" name="height" type="" value="height" size="6"  /> <label for="height">inches</label>
        </div>

        <div class="option" id="stock-select">
            <label for="stock-op">Stock Selection </label><div class="space-holder">&nbsp;</div>
        </div>

        <div class="option" id="corner-joint">
            <label for="corner-op">Corner Joint </label>
        </div>

        <div class="option" id="finish">
            <label for="finish-op">Finishing </label>
        </div>
    </section>

    <section id="quote">
    </section>
</div>
</body>
</html>
4

1 に答える 1

4

ドロップダウンメニューは動的に追加されます。次のようにイベントを委任する必要があります。

$(document).on("change", "#mydrop, #lastdrop, #newdrop", function() {

     // do something    

});

また、使用しない場合は、最新バージョンのjQueryを使用する必要があります。

于 2013-01-21T02:43:20.790 に答える