Question

我有一个非常奇怪的场景。我有一个旧代码库，我已经接管，每个页面加载一个jquery版本，如布局中指定。

但是我们不得不使用bootstrap在这些页面上进行一些响应。我的问题是，在不破坏页面中运行的JS的情况下，我无法更改jquery版本以满足bootstrap。

因此我试图将Jquery提供的noconflict方法应用于一个弹出的元素

<?php $this->Js->JqueryEngine->jQueryObject = '$j';
echo $this->Html->scriptBlock(
'var $j = jQuery.noConflict();',
array('inline' => false)
); ?>
<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">  </script>

<div class="modal fade" id="logModal" tabindex="-1" role="dialog" aria-labelledby="logModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title login_register_boot" id="logModalLabel">Already registered? Login now</h4>
        </div>

        <?php echo $this->Form->create('CustomUser', array('url' => array('controller' => 'custom_users', 'action' => 'ajax_login',
        'inputDefaults' => array(
            'label' => array('class' => 'false')
        )
        ))); ?>
        <fieldset class="modal-body">
            <div class="col-xs-12 col-sm-4 login_margin_top">
            <?php echo $this->Form->input('username', array('type' => 'text', 'id' => 'inputUsername3', 'placeholder' => 'Username')); ?>
            </div>

            <div class="col-xs-12 col-sm-4 login_margin_top_bot">
            <?php echo $this->Form->input('password', array('type' => 'password', 'id' => 'inputPassword4', 'placeholder' => 'Password')); ?>
            </div>

            <?php echo $this->Js->submit('Login', 
            array(
        'url' => array(
        'controller' => 'custom_users',
        'action' => 'ajax_login'
        ),
        'update' => '#login-content',
        'before' => '$("#loading").fadeIn("slow");',
        'complete' => '$("#loading").fadeOut("slow");',
        'class' => 'btn btn_submit fl login_margin col-xs-12 col-sm-4'
    )
            );?>

            <a class="col-xs-12 col-sm-4 col-sm-offset-4" id="forgot-password" href="#">Forgot your password?</a>
            <?php echo $this->Form->end(); ?>
        </fieldset>
    <div class="modal-footer">      
            <a data-toggle="modal" style="outline: none;" data-target="#regModal" href="#regModal">Not registered? Register now</a>
    </div>
    </div>
</div>

所以基本上我希望这里所有与bootstrap相关的东西都使用上面的jquery版本，并且页面的其余部分使用布局中加载的旧jquery版本。我正在努力让它发挥作用。我是否误解了如何使用noConflict，如果是，我如何在这种情况下使用noConflict？

如何在cakephp中正确使用jquery noConflict弹出元素

0 个答案: