Question

我有一个点击Add More positions，它附加了一些由Select标记组成的HTML。每当我触发此事件时，它将生成html并将其附加到其子级。它具有多个具有动态值的选择标签。但是问题是当我单击事件时，所有先前的选择框都将更改为默认值或索引。我的代码如下。

document.getElementById("positionsadd").addEventListener("click", function() {

        var min=498; 
        var max=875;  
        random =Math.floor(Math.random() * (max - min)) + min; 
        let f = 1;
        htmlClone = 
        `<tr class="mainrow${random}" id="mainrow${random}">
            <td>
                <table class="position">
                    <tbody>
                        <tr class="position-numbers position-numbers-clone${random}" >


                        </tr>

                    </tbody>
                </table>
            </td>
            <td class="select-technique">
                <select class="technique-class${random}" id="technique-class${random}" onchange="myOnChange(this)">

                </select>
            </td>
            <td>
                <table class="choose_colors">
                    <tbody class="choose_colors_body">
                        <tr>
                            <td><span>1</span></td>
                            <td><span>2</span></td>
                            <td><span>3</span></td>
                            <td><span>4</span></td>
                        </tr>
                        <tr>
                            <td><span>5</span></td>
                            <td><span>6</span></td>
                            <td><span>7</span></td>
                            <td><span>8</span></td>
                        </tr>
                    </tbody>
                </table>
            </td>
            <td>
                <table class="choose_size">
                    <tr>
                        <td>H</td>
                        <td><input type="" name="vh" value="50" /></td>
                    </tr>
                    <tr>
                        <td>w</td>
                        <td><input type="" name="vw" value="46" /></td>
                    </tr>
                </table>
            </td>
            <td colspan="2">
                <label>48.00 INR</label>
            </td>
            <td colspan="2" class="clear${random}">
                <label>X</label>
            </td>
        </tr>`;

        cloneDoc.innerHTML += htmlClone;

});

Answer 1

如果“添加更多职位”是一个按钮，则该页面可能会在每次单击时重新加载。这是与提交按钮相关联的默认操作，某些浏览器将默认为重新加载所有类型的按钮。尝试将event.preventDefault（）添加到onClick函数的开头，以防止发生这种情况。（或考虑添加HTML以供参考。）这是有关此功能的文章：https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

document.getElementById("positionsadd").addEventListener("click", function(event) {
        event.preventDefault();
        var min=498; 
    //add the rest of your code

Answer 2

我已经解决了select和input字段的此问题，因为由于缺少Html和CSS而没有出现其他值。希望它能起作用。

<button type='button' id="positionsadd">click</button>

<table id='cloneDoc'></table>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script>
  $("table").change(function(event) {
    console.log(event.target);

    if (event.target.nodeName == 'INPUT')
      $(event.target).attr('value', event.target.value);
    if (event.target.nodeName == 'SELECT')
      $(event.target).find('option:selected')[0].setAttribute('selected', true);

  });


  document.getElementById("positionsadd").addEventListener("click", function() {

    var min = 498;
    var max = 875;
    random = Math.floor(Math.random() * (max - min)) + min;
    let f = 1;
    htmlClone =
      `<tr class="mainrow${random}" id="mainrow${random}">
    <td>
        <table class="position">
            <tbody>
                <tr class="position-numbers position-numbers-clone${random}" >


                </tr>

            </tbody>
        </table>
    </td>
    <td class="select-technique">
        <select class="technique-class${random}" id="technique-class${random}" onclick="myOnChange(this)">
                <option value="one">One</option>
                 <option value="two">Two</option>
        </select>
        
    </td>
    <td>
        <table class="choose_colors">
            <tbody class="choose_colors_body">
                <tr>
                    <td><span>1</span></td>
                    <td><span>2</span></td>
                    <td><span>3</span></td>
                    <td><span>4</span></td>
                </tr>
                <tr>
                    <td><span>5</span></td>
                    <td><span>6</span></td>
                    <td><span>7</span></td>
                    <td><span>8</span></td>
                </tr>
            </tbody>
        </table>
    </td>
    <td>
        <table class="choose_size">
            <tr>
                <td>H</td>
                <td><input type="" name="vh" value="50" /></td>
            </tr>
            <tr>
                <td>w</td>
                <td><input type="" name="vw" value="46" /></td>
            </tr>
        </table>
    </td>
    <td colspan="2">
        <label>48.00 INR</label>
    </td>
    <td colspan="2" class="clear${random}">
        <label>X</label>
    </td>
</tr>`;

    document.getElementById('cloneDoc').innerHTML += htmlClone;

  });

  function myOnChange(params) {
    console.log(params);

  }
</script>

防止使用JS将选择框更改为默认框

2 个答案: