What is the problem with jquery generating new form items?

There is a troublesome form in the

project as shown above. The "add case" button generates a new form item. Click the "submit" button below to submit all form items. If the form is only an input box is no problem, but the "project area" and "investment time" are provinces, cities and regions three-level linkage and calendar jquery plug-ins, page initialization generated when the good, through the template splicing way to generate the input plug-in can not be implemented, how to solve this?

//
$("-sharppwt-add").click(function (e) { 
      e.preventDefault();
      var html =
        "<div class="clearfix"><div class="fpw-item fl"><label for=""></label><input type="text" id="dt1" name="name" placeholder=""><div id="dd1"></div></div><div class="fpw-item fr"><label for=""></label><input type="text" id="dt2" name="name" placeholder=""><div id="dd2"></div></div><div class="fpw-item fl"><label for=""></label><input type="text" name="name" placeholder=""></div> <div class="fpw-item fr"><label for=""></label><input type="text" name="name" placeholder=""></div>/div>"
      $(this).before(html)
    })
Dec.01,2021

if it is a three-level linkage event of provinces, cities and autonomous regions bound to the input in the project area:

//:
$("body").on('click', '.sheng', function () {
       
});
// change
<input type="text" name="name" placeholder="" onchange="sanjiliandong()">

if it is not the above event, then after the new form is generated, the plug-in configuration written on the new input will be repeated.

//
$('-sharppwt-add').click(function (e) { 
      e.preventDefault();
      var html =
        '<div class="clearfix"><div class="fpw-item fl"><label for=""></label><input type="text" id="dt1" name="name" placeholder=""><div id="dd1"></div></div><div class="fpw-item fr"><label for=""></label><input type="text" id="dt2" name="name" placeholder=""><div id="dd2"></div></div><div class="fpw-item fl"><label for=""></label><input type="text" name="name" placeholder=""></div> <div class="fpw-item fr"><label for=""></label><input type="text" name="name" placeholder=""></div>/div>'
      $(this).before(html)
      
      //   :
      $('-sharpdt1').datepicker({
            dateFormat: 'yy-mm-dd',
      });
      //
})

I don't see how you generate it. Give me an idea.
if you use jQ, when generating, you can cache the generated jQ object in the variable, so that every time you need to create a new one, you can insert the variable directly after it is built, or if you use a plug-in, you can insert another new instance. (. This plug-in is not in singleton mode, is it? )


should the jq plug-in you use reinitialize the


after generating the new form? do you mean that the form function on string concatenation is invalid? This is because your template is loaded before js runs, so it can be executed. However, the stitching after your string is naturally not monitored, so what you need to do is to call the time control for the generated form


try ``

with the template string of es6.
Menu