Is there any other way to call data-mage-init?

Question

On AJAX I want to display the Buy Now button. For that, I created one variable

 var buy_now_button = '<span title="<?php echo __('Buy Now') ?>" id="buy-now" class="action buynow primary" data-mage-init='{ "Test_Detail/js/buy-now": { "form": "#product_addtocart_form"  }}'><span><?php echo __('Buy Now') ?></span></span>';

Because of data-mage-init, the function is not working.

Answer 1

It looks like the single quote needs escaping, but according to this answer you can't simply use \ to escape the quote either (I'd still give it a try if I was you).

You can use ' to escape it though, whilst it is not very easy to read what is happening it may solve the problem for you.

Cleaner Method

The cleanest way to do this would be to use the x-magento-init method, and then you can pass the PHP through to the JS file.

Usage for that method is along these lines:

PHTML

<script type="text/x-magento-init">
    {
        "*": {
            "yourJsAliasOrPathHere": {
                "buyNowButton": "<?php echo ... ?>"
            }
        }
    }
</script>

JS

define([
    'jquery'
], function ($) {
    'use strict';

    return function(config) {
        alert(config.buyNowButton);
    }
});