打开按钮，不访问JS文件。克劳维约。JQuery

Question

我对js代码有问题。我试着在点击某个按钮时调用一个弹出框，但它不起作用。

我的目标是为某个按钮分配一个动作，在客户单击某个按钮时打开弹出。但问题是Klaviyo Pop-Up Box被设置为打开页面，默认情况下，在位于Klaviyo侧的JS文件中设置了加载设置，而我无法直接更改它们。

https://stackoverflow.com/questions/27334348/javascript-clickable-instead-of-automatically-pop-up是一个与我的问题类似的问题，但并不完全是我想要的。

我正在考虑的另一个选项是打破打开弹出onPageLoad的函数，然后添加这个函数将打开的操作分配给按钮。

这就是我认为我可以叫弹出onButtonClick的方式。

我的JS代码

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
 $('.button').on('click',function(){
 KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
 });
</script>

或

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
$(':button').click(function() {
    if (this.id == 'button') {
        KlaviyoSubscribe.attachToModalForm('#MainPage_PP');
        $('.button').popup('open');    
    }
</script>

按钮Html代码

<input type="button" class="button" value="Input Button" />  

我的弹出HTML代码

 <div class="klaviyo_modal" id="MainPage_PP" style="display:none;">
 <div class="klaviyo_inner">
 <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
 <form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
 <input type="hidden" name="g" value="LIST_ID">
 <div class="klaviyo_fieldset">
 <p class="klaviyo_header">Interested in our Newsletter?</p>
 <p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
 </div>
 <div class="klaviyo_fieldset">
 <div class="klaviyo_field_group">
 <label for="MainPage_PP_$email">Email Address</label>
 <input type="email" id="MainPage_PP_$email" name="email"></div>
 </div><div class="klaviyo_fine_print"></div>
 <div class="klaviyo_form_actions">
 <button type="submit" class="klaviyo_submit_button">
 <span>Subscribe</span>
 </button>
 </div>
 <div class="klaviyo_below_submit" ></div>
 </form>
 <div class="error_message" ></div>
 <div class="success_message" ></div>
 </div>
</div>

Answer 1

我将id="target"分配给按钮，让JS使用它进行操作。

重要的是，Klaviyo JS文件应该在所有动作之后加载，才能让嵌入式按钮正常工作。

HTML代码按钮

<input type="button" class="button" id="target" value="Input Button" />

JS代码

<script>
   $( "#target" ).click(function() {
    KlaviyoSubscribe.attachToModalForm('#MainPage_PP', {
        //some var for Klaviyo 
        ...
    });
    // It is essentially important to load the Klaviyo JS file after all actions 
    $.getScript("//www.klaviyo.com/media/js/public/klaviyo_subscribe.js")
});
</script>