Question

我有以下HTML结构，无法更改。

我需要使用jQuery将用户输入的信息附加到<ul>列表。我已经尝试使用以下代码但id不做任何事情。这样做的正确方法是什么？

$(document).ready(function() {
  $(".btn btn-outline-primary").click(function() {
    let toAdd = $("input[#title]").val();
    $("<li>" + toAdd + "</li>").appendTo("<ul>");
  });
});

<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <h2>Add Show</h2>
        <form>
          <div class="form-group">
            <label for="title">Show Title</label>
            <input type="text" class="form-control" id="title" placeholder="enter title" />
          </div>
          <div class="form-group">
            <label for="rating">Show rating </label>
            <input type="number" min="0" max="10" value="5" class="form-control" id="rating" />
          </div>
          <button type="submit" class="btn btn-outline-primary">Add show</button>
        </form>
      </div>
      <div class="col-6">
        <h2> Show List</h2>
        <ul>
        </ul>
        <button class="btn btn-outline-secondary"> Delete List</button>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

要修复的一堆错误：

将选择器与空格分开意味着将使用第二个选择器的后代搜索文档以查找第一个选择器 - 您不希望这样，将类名保持在一起（或者只选择{{ 1}}单独，因为其中只有一个）
您需要btn-outline-primary才能阻止表单提交和替换页面
如果要附加到HTML中的现有preventDefault()，ul不是有效的选择器。
'<ul>'应该被选为#title（毕竟，#title不能用HTML重复：

＆＃13;

id

＆＃13;

$(".btn-outline-primary").click(function(e) {
  e.preventDefault();
  let toAdd = $("#title").val();
  $("<li>" + toAdd + "</li>").appendTo("ul");
});

＆＃13;

Answer 2

public class PersistenceTest {

private static EntityManagerFactory emf;

@BeforeClass
public static void init() {

    Map<String, String> properties = new HashMap<>();

    properties.put("javax.persistence.jdbc.driver", "oracle.jdbc.OracleDriver");
    properties.put("javax.persistence.jdbc.url", "jdbc:oracle:thin:@127.0.0.1:1521:XE");
    properties.put("javax.persistence.jdbc.user", "SYS AS SYSDBA");
    properties.put("javax.persistence.jdbc.password", "root");
    properties.put("javax.persistence.transactionType", "RESOURCE_LOCAL");

    properties.put("hibernate.dialect", "org.hibernate.dialect.Oracle10gDialect");
    properties.put("hibernate.show_sql", "true");
    properties.put("hibernate.format_sql", "true");
    properties.put("hibernate.hbm2ddl.auto", "create");

    emf = new HibernatePersistenceProvider().createContainerEntityManagerFactory(createPersistenceUnitInfo(), properties);
}

private static PersistenceUnitInfo createPersistenceUnitInfo() {
    return new PersistenceUnitInfo() {
        @Override
        public String getPersistenceUnitName() {
            return "test-persistence-unit";
        }

        @Override
        public String getPersistenceProviderClassName() {
            return "org.hibernate.jpa.HibernatePersistenceProvider";
        }

        @Override
        public PersistenceUnitTransactionType getTransactionType() {
            return PersistenceUnitTransactionType.RESOURCE_LOCAL;
        }

        @Override
        public DataSource getJtaDataSource() {
            return null;
        }

        @Override
        public DataSource getNonJtaDataSource() {
            return null;
        }

        @Override
        public List<String> getMappingFileNames() {
            return Collections.emptyList();
        }

        @Override
        public List<URL> getJarFileUrls() {
            return Collections.emptyList();
        }

        @Override
        public URL getPersistenceUnitRootUrl() {
            return null;
        }

        @Override
        public List<String> getManagedClassNames() {
            return Arrays.asList(
                    "com.package.name.TestEntity");
        }

        @Override
        public boolean excludeUnlistedClasses() {
            return false;
        }

        @Override
        public SharedCacheMode getSharedCacheMode() {
            return null;
        }

        @Override
        public ValidationMode getValidationMode() {
            return null;
        }

        @Override
        public Properties getProperties() {
            return new Properties();
        }

        @Override
        public String getPersistenceXMLSchemaVersion() {
            return null;
        }

        @Override
        public ClassLoader getClassLoader() {
            return null;
        }

        @Override
        public void addTransformer(ClassTransformer transformer) {

        }

        @Override
        public ClassLoader getNewTempClassLoader() {
            return null;
        }
    };
}

首先覆盖提交。
应该正确获取值。使用CONFIG SET tcp_keepalive 200
附加到适当的元素

Answer 3

你的代码中有错误的选择器（对于btn和title），而且我也会改变追加代码。此外，您在表单中有一个提交按钮，单击它将导致提交。

试试这个：

$(document).ready(function(){
    $("form").submit(function(e){
        //prevent form submit;
        e.preventDefault();

        //append input text value to UL
        $("ul").append("<li>" + $("#title").val() + "</li>");
    });
});

Click here to test if in JsFiddle

使用jQuery附加用户输入

3 个答案: