Question

我有一个场景：

我正在构建一个问卷调查应用程序，我对一个调查问卷提出了很多问题。

在添加问题页面上，默认情况下我有一个问题other can be generated by jquery。

现在Below each question a button with name add answer为单个问题创建最多4个答案。

在同一页面上我有button for add another question

所以我确实为第一个问题成功地生成了答案（文本字段），就像明智一样。

$(document).ready(function() {
    var max_fields      = 3; 
    var wrapper         = $(".addChoices"); 
    var add_button      = $("#add_field_button");
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; 
            $(wrapper).append('<div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>'); 
        }
    }); 
    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

对于问题生成，我有代码通过jquery append()生成问题：

function addform(e){ //on add input button click
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".add-question-wrapper"); //Fields wrapper
    var add_button      = $(".add_question_button"); //Add button ID

        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label>  <div class="col-md-8"><select class="form-control"><option>Text</option><option>MCQs</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm" id="add_field_button">Add Choice</button></div>');
        }
    }

问题：

当我生成一个新问题时，生成问题的html按钮ID中每个问题的答案生成的按钮与默认问题按钮的id相同。

理解它：

按钮的ID默认问题现在等于生成的问题按钮ID相同。

现在生成的问题添加答案按钮既不能用于默认问题按钮。

Problem : Button id conflict.

Answer 1

所以我可以看到一些问题。

您需要使用班级名称而不是ID add_field_button。
您需要有一些x和y。不同的是跟踪问题总数和答案总数。您应该根据x计算出number of choices所显示的元素数量，而不是.addChoices。

包装器应该是最接近的$(document).on("click", ".add_field_button", function(e) { var wrapper = $(this).closest("div").prev(".addChoices"); var _num_choices = $(this).closest("div").prev(".addChoices").find(".singletonChoiceContainer").length; if (_num_choices < max_fields) { x++; wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span> |  <span style="color: blue">Delete Choice</span></div>'); } });

public boolean authenticate() {
    try {
        System.setProperty("jsse.enableSNIExtension", "false");
        System.setProperty("com.sun.net.ssl.enableECC", "false");

        CookieManager manager = new CookieManager();
        manager.setCookiePolicy(CookiePolicy.ACCEPT_ALL);
        CookieHandler.setDefault(manager);

        URL url = new URL("https://...");
        HttpsURLConnection con = (HttpsURLConnection) url.openConnection();

        con.setRequestMethod("GET");
        con.setUseCaches(false);
        con.setInstanceFollowRedirects(true);
        con.setConnectTimeout(5000);
        con.setReadTimeout(5000);

        // KeyStore
        KeyManagerFactory keyManagerFactory = KeyManagerFactory.getInstance("SunX509");
        KeyStore keyStore = KeyStore.getInstance("PKCS12");
        keyStore.load(new FileInputStream("PATH/TO/.P12/file"), "P12password".toCharArray());
        keyManagerFactory.init(keyStore, "P12password".toCharArray());
        // ---

        // TrustStore
        TrustManagerFactory trustManagerFactory = TrustManagerFactory.getInstance(TrustManagerFactory.getDefaultAlgorithm());
        KeyStore trustStore = KeyStore.getInstance("JKS");
        trustStore.load(new FileInputStream("PATH/TO/.JKS/file"), "JKSpassword".toCharArray());
        trustManagerFactory.init(trustStore);
        // ---

        SSLContext context = SSLContext.getInstance("SSLv3");
        context.init(keyManagerFactory.getKeyManagers(), trustManagerFactory.getTrustManagers(), new SecureRandom());

        con.setSSLSocketFactory(context.getSocketFactory());

        con.getContent();
        CookieStore cookieJar =  manager.getCookieStore();
        List<HttpCookie> cookies = cookieJar.getCookies();
        for (HttpCookie cookie: cookies) {
            if (COOKIE_NAME.equals(cookie.getName())) {
                COOKIE_VALUE = cookie.getValue();
                return true;
            }
        }
        return false;
    } catch (Exception e) {
        e.printStackTrace();
        return false;
    }
}

以下是更新后的fiddle

Jquery使用append（）按钮冲突生成html

1 个答案: