Question

我有一个主页，它使用AJAX调用来根据用户选择从第二页公开内容。第二页生成的元素之一是下拉列表。我的下拉列表使用Javascript库格式化。

我遇到的问题是，如果我将下拉元素放在主页面上，它就会毫无问题地呈现。但是，如果它是由第二页（通过AJAX）呈现的，则下拉列表不会呈现。我觉得我需要以某种方式再次致电图书馆，但我真的不确定。

这是我主页上的AJAX代码：

<script type="text/javascript">
    jQuery('input[name="location"]').click(function(){
        var data = {location : jQuery(this).val(), department : $('input[name="department"]:checked').val(), userID : 12345};
        jQuery.ajax({
            url: "/new-custom.php",
            type:'POST',
            data: data,
            dataType: 'html',
            async: 'true',
            success: function(result){
                jQuery('#div-custom').html(result).show(); 
            }
        });        
    });
</script>

这是在new-custom.php上呈现的表单元素：

<div class="form-group">
    <label class="control-label" for="field_20">Room Type</label>
    <select class="form-control selectpicker" id="field_20" name="field_20">
        <option value="0" selected>Select an option</option>
        <option value="Double">Double</option>
        <option value="Queen">Queen</option>
        <option value="Standard">Standard</option>
        <option value="King">King</option>
    </select>
</div>

这是我的主页上包含的Javascript库：

<script src="/vendors/bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>

我是否需要以某种方式在AJAX成功函数上执行bootstrap-select.js库？

非常感谢您的任何帮助！

Answer 1

添加后，您需要在新添加的元素上初始化插件。

将您的代码更改为：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="address-input.html"> 
<link rel="import" href="package-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">

<dom-module id="step-one">
<style>
</style>
<template>
    <section id="addresses">
        <div class="container">
            <div class="row">
                <h5>Addresses</h5>
                <address-input></address-input>
            </div>
        </div>
    </section>
    <section id="packages">
        <div class="container">
            <div class="row">
                <h5>Packages</h5>
                <package-list></package-list>
            </div>
        </div>
    </section>


    <section id="submit-shipping-info">
        <div class="container">
            <div class="row">
                <a class="waves-effect waves-light btn col s12 m12 l12" id="submit" on-click="submitInfo">Submit</a>
                <template is="dom-repeat" items="{{options}}">
                    <p>{{item.rates}}</p>
                </template>
            </div>
        </div>
    </section>


</template>
</dom-module>
<script>
Polymer ({
    is: 'step-one',
    properties: {
        options: {
            type: Object,
            notify: true,
            value: []   
        }   
    },
    submitInfo: function(e) {
        e.preventDefault();

        //add dimensions of all packages to the dimensions array
        var dimensions=[];
        $('#packages .package-card').each(function(){
            var weight= $(this).find('.weight').val();
            var length= $(this).find('.length').val();
            var height= $(this).find('.height').val();
            var width= $(this).find('.width').val();
            var dimension={width:width,length:length,height:height,weight:weight};
            dimensions.push(dimension);
        });

        //capture address data
        var from = $('#fromAddress').val();
        var to = $('#toAddress').val();

        //URL that processes getting a URL
        var getQuoteURL = '../v2/API/get_rates.php';
        var stuff = [];

        jQuery.ajax({
            type: "POST",
            dataType: "json",
            cache: false,
            url: getQuoteURL,
            data:{
                from:from,
                to:to,
                dimension:dimensions
            }
        }).done(function(data){
            $.each(data['rates'], function(i, rate ) {
                stuff.push({carrier:rate.carrier});
                return stuff;
            });

            //show step two when ajax call completes
            $('.step-two').removeClass('hide').addClass('show');
            console.log(stuff);//I can see all objects I need to pass to the 'options' property
            return stuff;
        });
        this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
    }
});
</script>

Answer 2

是。当元素存在时，大多数插件和所有直接进行DOM操作的插件都需要初始化。所以如果它们被ajax加载，那么你需要在它们插入DOM后在ajax回调中初始化它们

可以做类似的事情：

jQuery('#div-custom')
      .html(result)
      .show()
      .find('.selectpicker')
      .selectPluginName(/* options*/);

AJAX成功后调用Javascript库

2 个答案: