使用 Jquery 的 Hubspot 日期选择器克隆不起作用-解网

问：

我正在使用 hubspot 制作申请表并添加一个“添加+”按钮以允许用户添加其他教育和经验字段。当我使用 jquery 克隆字段时，日期字段不再起作用。如何重新初始化字段或使克隆的字段识别日期选取器？提前致谢！

openModal() {

// Set form submit to allow for multiple applications
this.formSubmitted = false;
this.isModalOpen = true;
document.documentElement.style.overflow = 'hidden';

// Create hubspot form on modal open to allow for multiple applications
hbspt.forms.create({
  region: "na1",
  portalId: "",
  formId: "",
  target:".hubspot-form-area",
  onFormSubmitted: function($form){
    applicationModal.formSubmitted = true;
  },
  onFormReady: ($form) => {

    // Display file name on hubspot file upload
    $('.hs-fieldtype-file input').on('change', function() {
      const fileName = $(this).val().split('\\').pop();
      const spanElement = $(this).parent().parent().find('label > span');
      spanElement.text(fileName || 'File has been uploaded!');

    });

    function addFieldsClick(...fields) {
      return function(e) {
        e.preventDefault();


        let clonedFields = [];

        // Clone each field, clear its value
        fields.forEach(function(field, index) {
          let lastField = $(`.hubspot-form-area ${field}:last`);
          let clonedField = lastField.clone();
          clonedField.find('input').val('');


          // Check if the element has the class .form-columns-2 and apply the appropriate display property
          if (clonedField.is('.form-columns-2')) {
            clonedField.css('display', 'flex');

          } else {
            clonedField.css('display', 'block');
          }

          clonedFields.push(clonedField);
        });

        // Add the remove button
        let removeBtn = $('<fieldset class="form-columns-0"><div class="hs-richtext hs-main-font-element"><span class="trashcan-icon"><img src="/trashcan" class="remove-education" alt="Trash Can Icon"/></span></div></fieldset>');
        removeBtn.find('.remove-education').click(function(f) {
          f.preventDefault();

          // Remove the cloned fields and the remove button
          clonedFields.forEach(function(clonedField, index) {
            clonedField.remove();
          });

          removeBtn.remove();
        });

        // Append the cloned fields and the remove button to the last field of the last type
        let lastFieldOfLastType = $(`.hubspot-form-area ${fields[fields.length - 1]}:last`);
        lastFieldOfLastType.after(removeBtn);
        clonedFields.reverse().forEach(function(clonedField, index) {
          removeBtn.after(clonedField);
        });
      };
    }

    $('.add-education.first-add').off('click').click(addFieldsClick('.form-columns-1:has(.hs_school)', '.form-columns-1:has(.hs_field_of_study)', '.form-columns-1:has(.hs_degree)', '.form-columns-2:has(.hs_school_start_date_)'));
    $('.add-education.second-add').off('click').click(addFieldsClick('.form-columns-1:has(.hs_jobtitle)', '.form-columns-1:has(.hs_company)', '.form-columns-1:has(.hs_0-2\\/industry)', '.form-columns-1:has(.hs_experience_summary__optional__)', '.form-columns-2:has(.hs_job_start_date)', '.form-columns-1:has(.hs_i_currently_work_here_single_checkbox)'));

  },
});
},

我尝试使用 jquery datepicker 函数，但它似乎不适用于 hubspot

javascript jquery datepicker clone hubspot

你永远不应该在 Vue 中使用 JQuery。

^{_{除非你绝对必须这样做，这里有一篇文章概述了这场噩梦：https://medium.com/js-dojo/how-to-safely-use-a-jquery-plugin-with-vue-js-786acdfb743b。}}

然而，听起来你找到了 JQuery 的日期选择器，并认为你可以将它用于 Vue。相反，你需要为 vue 找到一个日期选择器。

我不知道你使用的是哪个版本的 Vue，但这里有一个 Vue3 的日期选择器： https://vue3datepicker.com/

如果你有兴趣，这就是为什么你不应该在 Vue 中使用 JQuery 插件的原因。

首先，我将讨论一些 Web 开发的历史，以展示 JQuery 和单页 Web 应用程序框架（我们简称为 SWAF）的关系，例如 Vue、React 和 Angular。一旦我们知道了区别，我将解释为什么它们不应该一起使用。

JQuery 是 SWAF 的前身。在 SWAF 之前，JQuery 会直接对实时 DOM 进行更改。

这是一个巨大的突破，但它也弥补了浏览器之间的差异（当时Microsoft的IE没有遵循javascript工作的标准化协议）。这也是一个非常宝贵的工具。

从那时起，IE几乎就灭绝了，尤其是在消费类计算机中。而且我们不必担心浏览器如何解释 JavaScript 之间的差异。

但更重要的是，当人们用 JQuery 构建伟大的东西时，代码开始变得过于复杂，以至于无法合理管理。大约在那个时候，一些大公司开始意识到这一点，并开始制定使复杂性更易于管理的方法。

Google 构建了 Angular，不久之后 Facebook 构建了 React。过了一会儿，这个叫“Evan You”的家伙意识到，这些框架中有很多东西对大公司来说是件好事，但对小项目来说却是坏事，所以他构建了一个更高效、更精简的框架，叫做 Vue。

关于整个事情，重要的是要知道 Angular、React 和 Vue 的工作方式基本相同，并且它们改进了 JQuery 已经做的事情。

因此，请考虑一下这个基于 JQuery 的 Web 应用程序：

<!-- index.html -->
<form>
  <input type="text"/> 
  <button type="submit">Submit</button>
</form>

// actions.js
$(document).ready(()=>$(button).on('click',checkValue())

// validate.js
function checkValue(){
  if($('input').attr('value')===''){
    alert('No value')
    return false
  } else {
    $('form').html('<div>Success!!</div>')
  }
}

在此应用程序中，用户填写一些数据，按提交，然后 JQuery 更改页面上的内容以显示“成功！

现在看看 SWAF 有何不同：

<!-- index.html -->
<Form/>


// Form.js

let success = false

function Form(){
  return {
    <form>
      success ? Success!! :
      {
        <input type="text"/> 
        <button type="submit" onclick="checkValue()">Submit</button>
      }
    </form>
  }
}

function checkValue(){
  if(state.input.value==='')
    alert('No value')
  else 
    success = true
}

了解 SWAF 如何使用称为“状态”的东西。该变量替换了 JQuery。它包含页面上的所有元素，因此您可以对其进行更改，然后将这些更改推送到页面（该过程称为渲染）。

因此，JQuery 更新的是实时 DOM，而 SWAF 会更新虚拟 DOM。因此，当您将两者混合使用时，最好的情况是 JQuery 被神秘地覆盖，最坏的情况是您让它工作一段时间，然后它突然停止工作，您不知道为什么。

感谢您的回复和信息！我不知道将两者一起使用不好。但我使用的是jQuery来操作HubSpot表单，而不是Vue.js。我认为我面临的问题很可能是由于 HubSpot 的日期选择器在页面加载时被初始化，并且它不会自动为动态添加的字段重新初始化。如果没有 HubSpot 提供的公共方法来手动初始化新字段上的日期选择器，找到此问题的解决方案可能非常具有挑战性。

0赞 Travis Heeter 8/7/2023

好的，所以你不使用 Vue 吗？为什么是标签？

0赞 Alyx 8/7/2023

我在我的应用程序中使用 vue，但我也在使用 jquery 进行克隆。很抱歉造成混乱。也许我应该删除标签？

0赞 Travis Heeter 8/7/2023

使代码更精确。删除任何不必要的内容。90% 的情况下，这种做法会导致您在发帖之前就发现自己的问题。

上一个：使用 Chrome 控制台从实时网站上的 jQuery datepicker 对象中提取启用/禁用日期

下一个：jQuery DataTables 在使用日期时间选取器时没有所有 post 值

使用 Jquery 的 Hubspot 日期选择器克隆不起作用

Hubspot date picker clone using Jquery not working

评论

你永远不应该在 Vue 中使用 JQuery。

评论