两个函数不能一起工作（jQuery）

Question

好的，我想这是一个优先考虑的问题，但我不知道如何解决它。

这是我的问题。

我有两个函数（jQuery）解决选择标记。 第一个允许获取所选选项的值并将其放在一个范围内（在选择标记旁边）。用于显示用户选择的值。

jsFiddle here

我会告诉你它不会太久：

选择 我正在处理：

<div class="col-xs-4">
     <label>Kitten(s)</label>
     <div class="selector">
         <select>
            <option value="1" >01</option>
            <option value="2">02</option>
            ...
         </select><span class="custom-select"></span>
     </div>
</div>

jQuery：

jQuery(document).ready(afficheSelect);
function afficheSelect(){
     $('select').on('keyup change', function(){
         $(this).next('span').empty(); /* Empty the span when a change occur */ 
         $(this).next('span').append($(this).val()); /* Show the number selected */
     });
}

我的第二个功能显示选择的第一个值的函数选择。

假设您选择3只小猫它会做3 选择，您可以在其中指定颜色（例如）。

第二个功能:(你不必阅读它来回答我的问题:)）

jQuery(document).ready(affKitt);
function affKitt(){
    $('select').on('keyup change', function(){
    $('#test').empty();
    nbK = $(this).val();

    if(nbK > 0){
        html = "<label id='bug7'>Indicate the color of the kitten :</label>";

        for(var i=1; i <= nbK; i++) /* Show number of select */
        {
            else
            {
                html +='<div class="col-xs-4"><div class="selector"><select id="colorKitten'+i+'" name="colorKitten'+i+'">';
                for(var k=2; k <= 11; k++) /* Show option (allways the same) */
                {
                    html +="<option value='colorSelected'>Blue, Grey ....</option>";
                }
                /* Closing tags */
                html +="</select><span class='custom-select'></span></div></div>";
            }
        }
        $('#colorKittens').append(html); /* This is a div under a certaine place */
    }

    });
}

现在 这是我的问题 ：第一个函数不适用于我的第二个函数选择生成...为什么???

感谢能够回答此问题的任何人！

Answer 1

您需要在event handler change event上为variable应用html，然后才能将$('#colorKittens').append(html);附加到元素// Make the variable for HTML a jQuery object, so you can apply jQuery.fn to it var jHtml = $(html); // Check that jHtml is not EMPTY if(jHtml.length) { jHtml.afficheSelect(); $('#colorKittens').append(jHtml); } 。

<强>解决方案

<select class='my_select_box'>
    <option value='blue'>Blue Kitten</option>
    <option value='red'>Red Kitten</option>
    <option value='red'>Yellow Kitten</option>
</select>
<span class='mynextelement'></span>

<强> HTML

jQuery.fn.afficheSelect = function() {
     var next_span_element = $(this).next('span');
     $(this).change(function() {
        var selected_option_value = $(this).find('option:selected').val();   
         next_span_element.html(selected_option_value); /* Show the number selected */
     });
};

<强> afficheSelect

span

我找不到function元素，无法找到;在.change的{​​{1}}内。

JSFiddle

Answer 2

而不是：

jQuery(document).ready(afficheSelect);
function afficheSelect(){
     $('select').on('keyup change', function(){
         $(this).next('span').empty(); /* Empty the span when a change occur */ 
         $(this).next('span').append($(this).val()); /* Show the number selected */
     });
}

试试这个：

jQuery(document).ready(afficheSelect);
function afficheSelect(){
     $('select').on('keyup change', function(){
         $(this).next('span').html($(this).val()); /* Show the number selected */
     });
}

Answer 3

好的我已经成功了。

就像将函数调用到创作函数一样简单：请参阅此处的小提琴： Solution

一个简单的afficheSelect();